程序员之家
程序员之家

HTML 表格



HTML 表格由 <table> 标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义),表格可以包含标题行(<th>)用于定义列的标题。

  • tr:tr 是 table row 的缩写,表示表格的一行。
  • td:td 是 table data 的缩写,表示表格的数据单元格。
  • th:th 是 table header的缩写,表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

以下是一个简单的 HTML 表格实例:

<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
</table>

以上的表格实例代码中,<table> 元素表示整个表格,它包含两个主要部分:<thead> 和 <tbody>。

  • <thead > 用于定义表格的标题部分:在 <thead > 中,使用 <th > 元素定义列的标题,以上实例中列标题分别为"列标题1","列标题2"和"列标题3"。
  • <tbody > 用于定义表格的主体部分:在 <tbody > 中,使用 <tr > 元素定义行,并在每行中使用 <td > 元素定义单元格数据,以上实例中有两行数据,每行包含三个单元格。

通过使用 <th > 元素定义列标题,可以使其在表格中以粗体显示,与普通单元格区分开来。

HTML 表格还可以具有其他部分,如 <tfoot > (表格页脚)和 <caption > (表格标题),<tfoot > 可用于在表格的底部定义摘要、统计信息等内容。 <caption > 可用于为整个表格定义标题。

HTML 表格还支持合并单元格和跨行/跨列的操作,以及其他样式和属性的应用,以满足各种需求。

我们也可以使用 CSS 来进一步自定义表格的样式和外观。


HTML 表格和边框属性

如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

使用边框属性来显示一个带有边框的表格:

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本:

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

手机扫码阅读本文


本文来自互联网,本网站转载的目的在于传递更多信息以供访问者学习参考,所属内容只代表原作者的个人观点,不代表本网站的立场和价值判断,版权归原作者所有。如有侵犯您的版权,请联系我们,我们收到后会尽快核实并第一时间改正。


上一篇
下一篇

手机扫码阅读本文

HTML5+CSS3+Javascript从入门到精通(标准版)【图】
HTML5+CSS3+Javascript从入门到精通(标准版)

10万读者检验,手机扫码看412节同步视频+661个案例分析+1000习题面试题+4396个案例+47部参考手册+1636个模版+17类素材库

HTML+CSS+Javascript入门经典 第3版【图】
HTML+CSS+Javascript入门经典 第3版

前端开发程序设计教程书籍,以丰富案例和循序渐进的教程,帮助读者零基础自学入门HTML、CSS、Javascript、Web前端开发,提供源代码下载。

CSS权威指南(第四版)(上下册)【图】
CSS权威指南(第四版)(上下册)

国际公认的HTML、CSS和Web标准领域的专家全新力作。Web视觉呈现技术。全面阐述CSS的实现方式,深入分析全新的CSS规范。

html-tutorial html-table