一、创建一个表格

• 创建一个两行三列的表格

  • tr 代表行
  • td 代表单元格

    <table>
    <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
    </tr>
    <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
    </tr>
    </table>

    二、给table添加的属性

• border="1" 表格边框

• width="600" 表格总宽600px
• height="300" 表格总高300px
• cellspacing="0" 单元格外边距归零

• cellpadding="" 单元格内边距

  <table border="1" width="600" height="300" cellspacing="0" cellpadding="10">
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  </table>
  

  三、给 tr 添加的属性

• 整行内容水平对齐方式

  • align=”left左对齐 / right右对齐 / center水平居中”
• 整行内容垂直对齐方式
  • valign=”top上 / bottom下 / middle垂直居中”

• 一行的高度

  • height=””

    四、给 td 添加的属性

• width="" 某一列的宽度

• height="" 某一行的高度
• 单元格内容的水平对齐方式
  • align=”left左对齐 / right右对齐 / center水平居中”

• 单元格内容的垂直对齐方式

  • valign=”top上 / bottom下 / middle垂直居中”

    五、单元格合并

• 合并列、向右合并单元格

  • colspan=”所要合并的单元格的列数”
• 合并行、向下合并单元格
  • rowspan=”所要合并单元格的行数”

<table border="1" width="600">
  <tr>
    <td>1.1</td>
    <td colspan="2">1.2</td>
    <td>1.4</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
    <td rowspan="2">2.4</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

六、表格行分组

• 表格标题 caption
• 表头 thead - tr -th 居中并加粗
• 表主体 tbody - tr -td
• 表尾 tfoot - tr -td

<table border="1" width="500" cellspacing="0">
  <caption>红星小学二年级一班期中考试成绩单</caption>
  <!-- 表头 -->
  <thead>
    <tr>
      <th>姓名</th>
      <th>成绩</th>
      <th>学号</th>
    </tr>
  </thead>
  <!-- 表主体 -->
  <tbody>
    <tr>
      <td>小明</td>
      <td>100</td>
      <td>001</td>
    </tr>
    <tr>
      <td>小芳</td>
      <td>99</td>
      <td>008</td>
    </tr>
    <tr>
      <td>小王</td>
      <td>88</td>
      <td>002</td>
    </tr>
  </tbody>
  <!-- 表尾 -->
  <tfoot>
    <tr>
      <td colspan="3">总人数：3</td>
    </tr>
  </tfoot>
</table>