likes
comments
collection
share

HTML标签 之 表格标签

作者站长头像
站长
· 阅读数 43

一、表格的基本语法

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

HTML标签 之 表格标签

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

二、表格的基本属性

实际上不常用,一般会通过 CSS 来设置。

属性名说明
alignleft、center、right表格相对周围元素的对齐方式
border1 或 ""表格是否有边框,默认为"",表示没有边框
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>

HTML标签 之 表格标签

三、表格结构标签

在表格标签中,分别用 <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="合并单元格的个数"

HTML标签 之 表格标签

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>

HTML标签 之 表格标签

转载自:https://segmentfault.com/a/1190000041902773
评论
请登录