HTML表格使用指南

简介: HTML表格使用指南

在HTML中,表格是一个强大的工具,用于展示结构化数据。一个表格由多个行和列组成,可以包含标题、头部、主体和脚注。以下是创建一个表格的基本元素和步骤,以及一个以《红楼梦》人物为例的三行四列表格示例。

表格的基本结构

<table>:定义表格

包裹整个表格内容。

表格属性
  • width:设置表格宽度。
  • height:设置表格最小高度,表格最终高度可能比设置的值大。
  • border:设置表格边框宽度。
  • cellspacing:设置单元格之间的间距。

<caption>:表格标题

为表格提供一个标题或说明。

<thead>:表格头部

包含表头行,定义列标题。

  • align:设置单元格的水平对齐方式,可选值:leftcenterright
  • valign:设置单元格的垂直对齐方式,可选值:topmiddlebottom

<tbody>表格主体

包含表格的主要内容区域。

<tfoot>:表格脚注

包含表格的总结或脚注信息。

<tr>:表格行

定义表格中的行。

<th>:表格头部单元格

用于表头,可以是任何单元格。

<td>:表格单元格

用于表格主体,表示数据。

《红楼梦》人物表格示例

假设我们要创建一个包含贾宝玉、林黛玉、薛宝钗和王熙凤四位人物的表格,展示他们的名字、别称、身份和特点。

<table>
  <caption>《红楼梦》主要人物</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>别称</th>
      <th>身份</th>
      <th>特点</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>贾宝玉</td>
      <td>宝二爷</td>
      <td>贾府公子</td>
      <td>多情善感,不拘小节</td>
    </tr>
    <tr>
      <td>林黛玉</td>
      <td>颦儿</td>
      <td>贾府外孙女</td>
      <td>才情出众,多愁善感</td>
    </tr>
    <tr>
      <td>薛宝钗</td>
      <td>宝姐姐</td>
      <td>贾府媳妇</td>
      <td>温婉贤淑,处事圆滑</td>
    </tr>
    <tr>
      <td>王熙凤</td>
      <td>凤姐</td>
      <td>贾府媳妇</td>
      <td>精明能干,手腕高强</td>
    </tr>
  </tbody>
  <!-- 表格脚注通常用于总结或附加信息,本例中未添加 -->
</table>


结语

表格是展示数据的绝佳方式,通过合理使用<table><thead><tbody><tfoot><tr><th><td>标签,可以创建出清晰、有组织的信息展示。希望这篇博客能帮助你更好地理解HTML表格的创建和使用。


目录
相关文章
N..
|
2月前
|
前端开发 开发者
HTML表格
HTML表格
N..
18 1
|
2月前
|
移动开发 前端开发 HTML5
【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用
【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用
103 0
|
2月前
|
敏捷开发
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
|
2月前
|
前端开发 JavaScript
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
47 0
|
5天前
|
移动开发 前端开发 HTML5
HTML5 表格快速入门:基础一点通
HTML5 表格快速入门:基础一点通
HTML5 表格快速入门:基础一点通
|
2天前
HTML表格的跨行与跨列:《红楼梦》人物与小学课表示例
HTML表格的跨行与跨列:《红楼梦》人物与小学课表示例
6 1
|
24天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
23 1
|
24天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
32 1
|
5天前
|
前端开发
常用 HTML 标签元素(表格、表单)
常用 HTML 标签元素(表格、表单)
|
2月前
|
移动开发 前端开发 开发者
HTML 表格
HTML 表格