H5学习笔记2 表格table 以及表单

一、表格table：

　　表格table的属性 

　　　　表格的边框 border="1" 　　　　　　　　　　  表格的外边框宽度是1

　　　　表格的宽    width="500" 　　　　　　　　　　 表格总宽度是500 

　　　　表格的高度 height="400" 　　　  　　　　　    表格的总高度是400 

　　　　表格的背景颜色 bgcolor="pink" 　　　　　　    背景颜色是粉色 

　　　　表格边框的颜色 bordercolor="red" 　　　　　   边框的颜色变成红色

　　　　单元格与单元格之间的距离 cellspacing="0" 　   单元格与单元格之间的间距变成0

　　　　单元格与里面内容的距离 cellpadding="0" 　　   单元格里面内容与单元格间距为0

　　　　cellpadding       cellspacing 默认值为auto 自动 

　　　　单元格水平居于左/中/右 

　　　　　　　　　　align="left"　　　　默认值 

　　　　　　　　　　align="center" 　　 水平居中 

　　　　　　　　　　align="right"   　　  水平居右  

　　　　可以设置给table、tr、td这三个标签 设置这个属性

　　　　单元格垂直方向居于 上/中/下 

　　　　　　　　　　valign="top"　　　　居于上  

　　　　　　　　　　valign="middle"　　  默认值 

　　　　　　　　　　valign="bottom"   　  居于下     

　　　　只能设置tr和td    不能设置给table标签

 

<table  >
        <!-- tr代表的是行 -->
        <tr >   
            <!-- td代表的是列　表格的单元格  -->
            <td>td是列</td>
            <td>td是列</td>
            <td>td是列</td>
            <td>td是列</td>
            <td>td是列</td>
        </tr>
        <tr>
            <td>tr是行</td>
            <td>tr是行</td>
            <td>tr是行</td>
            <td>tr是行</td>
            <td>tr是行</td>
        </tr>
    </table>

 　　合并单元格：

 <!-- 同行操作td 合并列 colspan="n"  记得删除下方n-1个表格 -->
    <table border="1" width="500" height="300" bgcolor="pink" cellspacing="0">
        <tr>
            <!-- 合并1-1到1-3的单元格 -->
            <td colspan="3">1-1</td> 
            <!-- <td>1-2</td>           
            <td>1-3</td>  -->
            <td>1-4</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
        </tr>
        <!-- 合并3-3到3-4的单元格 -->
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td colspan="2">3-3</td>   
            <!-- <td>3-4</td>         -->
        </tr>
    </table>
    <br>
    <br>
    <hr>

    <!-- rowspan 属性规定单元格可横跨的行数。 -->
    <table border="1" width="600" height="500" bgcolor="pink" cellspacing="0">
        <!-- 合并1-1到3-1行的单元格 -->
        <tr>
            <td rowspan="3">1-1</td>    
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
            <td>1-5</td>
            <td>1-6</td>
            <td>1-7</td>
            <td>1-8</td>
        </tr>
        <tr>
            <!-- <td>2-1</td> -->
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
            <td>2-5</td>
            <!-- 合并2-6到5-6行的单元格 -->
            <td rowspan="4">2-6</td>
            <td>2-7</td>
            <td>2-8</td>
        </tr>
        <tr>
            <!-- <td>3-1</td> -->

            <!-- 合并3-2到5-2的单元格 -->
            
            <td rowspan="3">3-2</td>
            <td>3-3</td>
            <td>3-4</td>
            <td>3-5</td>
            <!-- <td>3-6</td> -->
            <td>3-7</td>
            <td>3-8</td>
        </tr>
        <tr>
            <td>4-1</td>
            <!-- <td>4-2</td> -->
            <td>4-3</td>
            <td>4-4</td>
            <td>4-5</td>
            <!-- <td>4-6</td> -->
            <td>4-7</td>
            <td>4-8</td>
        </tr>
        <tr>
            <td>5-1</td>
            <!-- <td>5-2</td> -->
            <td>5-3</td>
            <td>5-4</td>
            <td>5-5</td>
            <!-- <td>5-6</td> -->
            <td>5-7</td>
            <td>5-8</td>
        </tr>
        <tr>
            <td>6-1</td>
            <td>6-2</td>
            <td>6-3</td>
            <td>6-4</td>
            <td>6-5</td>
            <td>6-6</td>
            <td>6-7</td>
            <td>6-8</td>
        </tr>
    </table>

 二、表单：

 <!-- 表单 -->
    <form action="传输数据的地址"method="传送的方式 有两种 post get" name="表单名字"></form>

　1.文本框

<!-- 文本框 -->
    <p>姓名：<input type="text"></p>
    <p>地址：<input type="text" value="框内提示（需要删除）"></p>
    <p>绰号：<input type="text" placeholder="框内提示（不需要删除）"></p>
    <p>密码：<input type="passwold" placeholder="请输入密码"></p>
    <!-- value=""一般不建议使用 建议使用 placeholder=""  -->

  2.密码框

<!-- 密码框 -->
    <p>密码：<input type="passwold" placeholder="请输入密码"></p>
    <!-- value=""一般不建议使用 建议使用 placeholder=""  -->

  3按钮.

　　普通按钮

<!-- 普通按钮  -->
    <input type="button" value="按钮">

　　跳转按钮

 <!-- 跳转按钮 -->
   <button>只是跳转到action所指的地址中 不会做任何事（不会做任何事）</button>

　　重置按钮

<!-- 重置按钮 -->
        <!-- 重置包含该标签的from表单的内容  默认带重置两个二字 -->
    <input type="reset"> 

   4.提交按钮

      <!-- 提交按钮 -->
        <input type="submit" value="提交按钮">

   5.单选按钮

 <!-- 单选/多选按钮  -->
            <!-- 同一组的name相同无法多选 -->
        <input type="radio" name="danxuan">1
        <input type="radio" name="danxuan">2
        <input type="radio" name="duoxuan1">1
        <input type="radio" name="duoxuan2">2
        <input type="radio" name="duoxuan3">3
        <input type="radio" name="duoxuan4">4