HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)

html 中的表格 <table> 由行 <tr> 组成,每行由单元格 <td> 组成。

所以表格是由行组成(行由列组成),而不是由行和列组成。

table 标签 display: table ,属于块级元素。

table 的属性

  • border:边框粗细,单位为像素
  • cellspacing:单元格和单元格之间的距离,单位为像素

语义化表格

html 复制代码
    <table border="1" cellspacing="0">
      <caption>
        表格标题
      </caption>

      <!--表头-->
      <thead>
        <tr>
          <th>表头1</th>
          <th>表头2</th>
        </tr>
      </thead>

      <!--表身-->
      <tbody>
        <tr>
          <td>第1行单元格1</td>
          <td>第1行单元格2</td>
        </tr>
        <tr>
          <td>第2行单元格1</td>
          <td>第2行单元格2</td>
        </tr>
      </tbody>

      <!--表尾-->
      <tfoot>
        <tr>
          <td>表尾单元格1</td>
          <td>表尾单元格2</td>
        </tr>
      </tfoot>
    </table>

简易表格

html 复制代码
  <table border="1" cellspacing="0">
    <tr>
      <th>姓名</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
    </tr>
  </table>

合并单元格

水平方向合并 colspan

如 colspan="2"表示当前单元格在水平方向上占据两个单元格的位置。

html 复制代码
<table border="1" cellspacing="0" style="width: 100px;height:100px">
  <tr>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

垂直方向合并 rowspan

如 rowspan="2"表示当前单元格在垂直方向上占据两个单元格的位置。

html 复制代码
<table border="1" cellspacing="0" style="width: 100px;height:100px">
  <tr>
    <td rowspan="2"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>
相关推荐
强化生物科研小助手1 天前
CAS:47623-98-3,DiSBAC2(3)一种慢反应的膜电位敏感探针
django·html·pygame
木木黄木木1 天前
HTML5图片裁剪工具实现详解
前端·html·html5
FanetheDivine1 天前
正确使用flex-1
css·html
木木黄木木1 天前
HTML5重力球动画实现详解
前端·html·html5
hello_simon1 天前
在线小白工具,PPT转PDF支持多种热门工具,支持批量转换,操作简单,高效适合各种需求
pdf·html·powerpoint·excel·pdf转html·excel转pdf格式
zhougl9961 天前
html处理Base文件流
linux·前端·html
木木黄木木2 天前
html5炫酷图片悬停效果实现详解
前端·html·html5
计算机毕设定制辅导-无忧学长2 天前
HTML 性能优化之路:学习进度与优化策略(二)
学习·性能优化·html
小旋风012342 天前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
前端Hardy2 天前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html