html--表格

1.基本表格标签

• table-tr-td

• table声明这是一个表格

• tr表格中的行

• td表格中的单元格

• <table border="1" width="300px" height="200px">
      <tr>
          <td height="80px" width="50px">单元格1</td>
          <td>单元格2</td>
          <td>单元格3</td>
      </tr>
  </table>

• 边框border

  • 默认情况下，表格不显示边框，相当于border="0",如果border的值大于0，则显示边框，数值越大，边框越粗

• 宽高 width height

  • 默认情况下，表格的宽高由内容决定，也可以设置width和height，设置整个表格的宽高，此时，表格内单元格的大小会自动分配

  • 如果想单独设置某一行的高度或者某一列的宽度，可以在td标签上添加width和height属性，一个单元格会影响它所在的行或列

  • 表格快捷生成：table>tr*2>td*3 2行3列的表格

• align属性在表格中的作用

  • 在table标签中添加align属性 设置整个表格的对齐方式

  • 在tr标签中添加align，设置这一行的文字对齐方式

  • 在td标签中添加align，设置这一个单元格的文字对齐方式

2.使用表格进行布局

例：

<h1 align="center">欢迎登录</h1>
<form action="">
    <table border="1" align="center" width="300px" height="100px">
        <tr>
            <td align="right">用户名：</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td align="right">密&nbsp;&nbsp;&nbsp;码：</td>
            <td><input type="password"></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" value="登录" style="width:100px;height: 30px;" >
            </td>
            <!--<td></td>-->
        </tr>
    </table>
</form>

• 常用的布局为“非”字型布局，左侧文字右对齐，右侧文字左对齐，一般应用于表单页面

3.合并单元格个

• 合并列 colspan

• 合并行 rowspan

• 合并单元格的步骤

  • 先观察原表格有几行几列

  • 找到要合并的单元格

  • 给要合并的单元格添加colspan或rowspan属性

  • 删除多余的单元格

• <table border="1" width="300px" height="200px">
      <tr>
          <td></td>
          <td rowspan="2"colspan="2"></td>
          <!--<td></td>-->
      </tr>
      <tr>
          <td></td>
          <!--<td></td>-->
          <!--<td></td>-->
      </tr>
      <tr>
          <td></td>
          <td></td>
          <td></td>
      </tr>
  </table>

4.表格高级标签

• caption 表格标题，标题会居中显示在表格上方

• thead 表格头部

  • thead中使用th代替td，表头的文字会加粗显示

• tbody 表格主体

• tfoot 表格尾部，一般用来做合计行

• <table border="1" width="500px" height="200px">
      <caption>年终数据报表</caption>
      <thead style="background: pink;">
          <tr>
              <!--表头单元格用th，而不是td,表头文字是加粗的-->
              <th></th>
              <th>1月</th>
              <th>2月</th>
              <th>3月</th>
              <th>小计（RMB）</th>
          </tr>
      </thead>
      <tbody style="background: deepskyblue;">
          <tr>
              <td>北京</td>
              <td>10</td>
              <td>10</td>
              <td>50</td>
              <td>70</td>
          </tr>
          <tr>
              <td>上海</td>
              <td>20</td>
              <td>20</td>
              <td>70</td>
              <td>120</td>
          </tr>
          <tr>
              <td>天津</td>
              <td>30</td>
              <td>40</td>
              <td>80</td>
              <td>150</td>
          </tr>
      </tbody>
      <tfoot style="background: yellow;">
          <tr>
              <td>总计（RMB）</td>
              <td>60</td>
              <td>80</td>
              <td>200</td>
              <td>340</td>
          </tr>
      </tfoot>
  </table>