关于html:HTML标签-之-表格标签

7次阅读

共计 1131 个字符，预计需要花费 3 分钟才能阅读完成。

<table>
  <tr>
    <th> 姓名 </th>
    <th> 性别 </th>
    <th> 年龄 </th>
  </tr>
  <tr>
    <td> 佩奇 </td>
    <td> 女 </td>
    <td>5</td>
  </tr>
</table>

1、<table> </table> 是用于定义表格的标签。
2、<tr> </tr> 是表格中的行，必须嵌套在 <table> </table> 标签中。
3、<td> </td> 是表格中的单元格，td 是 table data 的缩写，意为单元格内容，它必须嵌套在 <tr> </tr> 标签中。 单元格中能够放任何内容，文字、图片、链接都能够。
4、<th> </th> 是表头单元格标签，th 是 table head 的缩写，意为表格头部，个别位于表格第一行或第一列，文本内容会加粗、居中显示。

实际上不罕用，个别会通过 CSS 来设置。

属性名	值	阐明
align	left、center、right	表格绝对四周元素的对齐形式
border	1 或 “”	表格是否有边框，默认为 ””，示意没有边框
cellpadding	像素值	规定单元格边缘与内容之间的间隔，默认 1 像素
cellspacing	像素值	规定单元格之间的空白，默认 2 像素
width	像素值或百分比	规定表格的宽度

<table border="1" cellpadding="16" cellspacing="0"> // 属性要写在 table 标签
  <tr>
    <th> 姓名 </th>
    <th> 性别 </th>
    <th> 年龄 </th>
  </tr>
  <tr>
    <td> 佩奇 </td>
    <td> 女 </td>
    <td>5</td>
  </tr>
</table>

在表格标签中，别离用 <thead> 标签作为表格的头部区域、<tbody> 标签作为表格的主体区域，这样能够清晰的分清表格构造。<thead> 外部必须有 <tr> 标签。

<table>
  <thead>
    <tr>
      <th> 姓名 </th>
      <th> 性别 </th>
      <th> 年龄 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> 佩奇 </td>
      <td> 女 </td>
      <td>5</td>
    </tr>
  </tbody>
</table>

1、合并单元格的形式

跨行合并：rowspan=” 合并单元格的个数 ”
跨列合并：colspan=” 合并单元格的个数 ”

2、指标单元格

指标单元格是写合并代码的单元格。

跨行合并：最上侧单元格为指标单元格
夸列合并：最左侧单元格为指标单元格

<tbody>
  <tr>
    <td></td>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td rowspan="2"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</tbody>

正文完