HTML 表格

TML 表格实例:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
John	Doe	80
Adam	Johnson	67

在线实例

表格

这个例子演示如何在 HTML 文档中创建表格。

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格实例

<tr>

</tr>

<tr>

</tr>

</table>

在浏览器显示如下：:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML 表格和边框属性

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

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

<tr>

</tr>

</table>

HTML 表格表头

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

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

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

在浏览器显示如下：

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

更多实例

没有边框的表格

本例演示一个没有边框的表格。

表格中的表头(Heading)

本例演示如何显示表格表头。

带有标题的表格

本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格

本例演示如何定义跨行或跨列的表格单元格。

表格内的标签

本例演示如何显示在不同的元素内显示元素。

单元格边距(Cell padding)

本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)

本例演示如何使用 Cell spacing 增加单元格之间的距离。

HTML 表格标签

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

挑战30天在头条写日记#

HTML是一种用于创建网页结构和内容的标记语言，其中包含了许多标签，可以用于排版、布局和展示内容。本文将详细介绍HTML中的<tr>和<td>标签的使用方法，并通过示例展示如何创建表格。

1. <tr>标签的作用： <tr>标签代表HTML表格中的一行（行数据），它可以包含一个或多个<td>元素作为单元格。

2. <td>标签的作用： <td>标签用于定义表格中的一个单元格（列数据），可以包含文本、图像、链接等内容。

3. 如何使用<tr>和<td>： 在使用<tr>和<td>标签时，首先需要创建一个<table>元素作为表格的容器，然后在其中嵌套<tr>和<td>标签，如下所示：

htmlCopy code<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

4. 表格样式： 可以使用CSS来为表格添加样式，如设置边框、背景颜色等。以下是一个简单的示例：

htmlCopy code<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
</style>

5. 示例应用： 以下示例演示了如何使用<tr>和<td>标签创建一个包含姓名、年龄和城市的简单表格：

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>城市</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>广州</td>
  </tr>
</table>

</body>
</html>

6. 书籍参考：

"HTML and CSS: Design and Build Websites" by Jon Duckett
"Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins

7. 总结： 通过本文的介绍，我们了解了HTML中<tr>和<td>标签的基本用法，以及如何创建简单的表格和添加样式。使用这些标签，我们可以轻松地创建具有结构和内容的网页表格，提升页面的可读性和可视性。

过昨天的学习算是对HTML有了一点点了解，知道了什么是前端，什么是HTML、前端三大标准、主流浏览器和html的基本结构及常用标签。那么今天继续看看html还有什么新的知识吧。

特殊字符（了解即可）

有常见性就有特殊性，我们使用电脑时经常会用到空格键，在html文档上有时也会使用到空格键等等，那怎么在html上又是以什么形式展示给浏览器解析呢？

浏览器显示结果	特殊字符名称	HTML编辑字符
	空格	& n b s p;
<	小于号	& l t ；
>	大于号	& g t；
&	和	& a m p；
©	版权	& c o p y ；

表格标签

作用：在浏览器上清晰美观地显示、展示数据。

表格标签的语法

<table>

<tr>

</tr>

</table>

表格标签：<table></table>，一个table标签中可嵌套多个tr标签。

行标签：<tr></tr>，一个tr标签代表一行。一个行标签中可以嵌套多个单元格标签。

单元格标签：<td></td>，一个td标签代表一个单元格。在单元格中可以填充文本、图片、超链接等等内容。

在html中表格不是由横线划分行和列，而是大大小小的矩形盒子来划分。Table是一个最大的矩形盒子，里面包含tr标签，这个是一个和table长度差不多的矩形盒子，table一行仅容纳一个tr盒子。在tr盒子中还包含有N个td盒子，td盒子就是单元格。

表格示例：

在html文档中编辑表格标签结构时，除了一个标签一个标签地敲之外，可以使用快捷方式快速操作：如五行三列的表格，可以在table标签中输入：“tr*5>td*3”然后敲回车，就将其表格结构迅速展现出来。

<h1>表格示例：</h1>
<table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
</table>

运行界面示例：默认状态下表格是没有线条分界，表格对齐方式左对齐。

表头单元格标签

<th></th>：位于表格的第一行或第一列，可以使其内容加粗居中显示。

语法：

<table>

<th>

</th>

</table>

表头表格代码示例：

<h1>表头表格示例：</h1>
   <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

运行界面示例：

表格结构标签

表格结构标签分为表格头部标签和表格主体标签。类似于head标签和body标签对于html标签之间的关系。

表格头部标签：<thead></thead>。定义表格头部，嵌套在<table></table>中，一般位于第一行。

表格主体标签：<tbody></tbody>。定义表格主体，嵌套在<table></table>中，主要用于显示数据。

代码示例：

<h1>表格结构标签</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三丰</td>
                <td>男</td>
                <td>36</td>
            </tr>
            <tr>
                <td>李四喜</td>
                <td>女</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>

运行界面：

表格属性

虽然表格属性在实际开发过程中不常使用，一般都是通过CSS样式设置，但是还是需要记住这些属性关键词，在css中属性关键词也会用到。

注：这些属性都要写在table标签的开始标签中，多个属性之间需要使用空格分隔。

align：表格的对其方式。

align=“left”：在浏览器中居左显示。也是默认显示。

align=“center”：在浏览器中居中显示。

align=“right”：在浏览器中居右显示。

border：表格是否具有边框。

border=”1”：表格添加边框。

cellpadding：单元格内的元素和td边框的距离。

举个例子，如果表格是一件教室的话，桌子就是单元格，桌子上放的书本就是单元格内的元素，书本边缘和桌子边缘之间产生的空白区域就是cellpadding的值。

cellspacing：单元格和单元格之间的距离。默认是有空隙的，可设置为零，使其空隙清零，成为一条直线。

还是以教室为表格，桌子为单元格。桌子和桌子之间的距离就是cellspacing的值。

width：表格的宽度，属性值可以是像素值也可以是百分比。

height：表格的高度，属性值可以是像素值也可以是百分比。

代码示例：

<h1>表头表格示例：</h1>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="200px" height="300px">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>                   
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

运行界面：

合并单元格

合并单元格是指将两个或两个以上的单元格合并成一个单元格。合并属性一般写在单元格标签的开始标签上。合并代码属性设置后，要将没有写合并的单元格代码的其他合并单元格标签删除掉。

目标单元格：（合并代码存在位置）

跨行合并：最上侧单元格为目标单元格，写合并代码。

跨列合并：最左侧单元格为目标单元格，写合并代码。

合并单元格的方式：

跨行合并：将处于不同行的单元格进行合并

语法：rowspan=“合并单元格个数”

代码示例：

<h1>跨行合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

运行界面：

跨列合并：将处于不同列的单元格进行合并

语法：colspan=“合并单元格个数”

代码示例：

<h1>跨列合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

运行示例：

今天学习的表格内容就到这里了，明天开始学习列表。

在线咨询

上一篇：韩国传统工艺课程体验
下一篇：如何编写HTML提交按钮代码？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 表格

特殊字符（了解即可）

表格标签

您的项目需求