table表单的相关属性

1.table：table是一个表格标签

例如

   <table border="1" cellspacing="0" cellpadding="12">
        <tr>
            <!--    行标签，有多少行，写多少个 -->
            <td>
                <!-- 单元格。有多少单元格写多少 -->
                1
            </td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
  </table>
border:让整个表格的边框为1
cellspacing: 单元格之间的间距
cellpadding: 单元格的内边距

效果图                     

 <table border="1">
        <tr>
            <!--    行标签，有多少行，写多少个 -->
            <th>
                <!-- 单元格。有多少单元格写多少 -->
                1
            </th>
            <th>2</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>

效果图              

 

2. th单元格和td单元格的区别  --  th会有默认的样式，文字居中和字体加粗效果

3.table中常用的标签

        <table> ：定义表格

        <tr> ：定义表格的行

       <td> ：定义表格中的单元格

       <th> ：定义表格中的表头单元格

       <thead> ：定义表格中的表头内容  --相当于给表格增加了一些意义，不在是单纯的格子

       <tbody> ：定义表格中的主体内容

      <tfoot> ：定义表格中的表注内容（脚注）

     <caption>：定义表格标题

例子

<table>
   <thead>
       <tr><td></td></tr>
   </thead>
   <tbody> 
      <tr><td></td></tr>
   </tbody>
   <tfoot> 
      <tr><td></td></tr>
  </tfoot>
</table>

4.关于跨行和跨列

td开始标签写colspan=“”   进行合并行，也就是跨列

                      rowspan=""  进行列合并，也就是夸行’

<table border="1" cellspacing="0" cellpadding="12">
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <td>222</td>
            <td>222</td>
            <td rowspan="3">222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
        </tr>
        <tr>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td rowspan="2">333</td>
            <td>333</td>
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
        </tr>
        <tr>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
        </tr>
    </table><table border="1" cellspacing="0" cellpadding="12">
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <td>222</td>
            <td>222</td>
            <td rowspan="3">222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
        </tr>
        <tr>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td rowspan="2">333</td>
            <td>333</td>
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td>444</td>
        </tr>
        <tr>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
            <td>555</td>
        </tr>
    </table>

标签：表格,555,333,表单,111,table,444,222,属性
来源： https://blog.csdn.net/qq_42625428/article/details/101208018