整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

HTML表格标签的使用方法与示例

挑战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>标签的基本用法，以及如何创建简单的表格和添加样式。使用这些标签，我们可以轻松地创建具有结构和内容的网页表格，提升页面的可读性和可视性。

格是组织和显示数据的一种有效方式，无论是在文档中还是网页上。良好的表格设计可以提高信息的可读性和易理解性。本文将详细介绍如何创建和格式化表格，并提供一些实例。

创建表格

在Word或类似文档编辑器中创建表格

  1. 插入表格：打开文档编辑器，例如Microsoft Word，找到“插入”选项卡，点击“表格”，选择需要的行数和列数。
  2. 输入数据：点击表格中的单元格，开始输入数据。可以使用Tab键在单元格之间跳转。
  3. 调整行列：根据需要调整行高和列宽。在Word中，可以通过拖动表格边框来调整，或者点击右键选择“表格属性”进行精确设置。

在HTML中创建表格

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

  • <table> 标签用于创建表格。
  • <tr> 标签定义表格中的行。
  • <th> 标签定义表头单元格，通常加粗居中显示。
  • <td> 标签定义标准单元格。

格式化表格

格式化表格包括调整表格的样式、布局和颜色等，以提高其可读性和美观性。

文档编辑器中的格式化

  1. 边框样式：可以为表格或单个单元格设置边框样式、颜色和宽度。在Word中，选择表格，然后在“设计”选项卡中选择边框样式。
  2. 单元格填充：为了区分不同的行或列，可以对单元格进行颜色填充。在Word中，选择单元格或行列，然后在“布局”选项卡中选择“填充”。
  3. 文本对齐：文本对齐方式可以设置为左对齐、居中或右对齐。选择单元格后，在“布局”选项卡中选择对齐方式。
  4. 合并单元格：有时需要将多个单元格合并为一个单元格以显示标题或其他信息。选择要合并的单元格，然后点击“合并单元格”。

HTML中的格式化

在HTML中，格式化通常通过CSS完成。

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

  • border-collapse 设置为 collapse 以消除单元格之间的间隙。
  • th, td 设置了边框、填充和文本对齐。
  • th 设置了表头的背景色。
  • tr:nth-child(even) 为偶数行设置了条纹效果。

实例

文档编辑器实例

假设我们需要创建一个3x3的表格，显示一个小型团队的成员信息。

  1. 插入一个3行3列的表格。
  2. 输入数据：姓名、职位、邮箱。
  3. 设置第一行为表头，加粗并填充淡蓝色背景。
  4. 设置所有单元格的文本为居中对齐。
  5. 为表格添加外边框，并为行添加细边框。

HTML实例

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    width: 50%;
    border-collapse: collapse;
    margin: 25px 0;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>
</head>
<body>

<table>
  <tr>
    <th>Name</th>
    <th>Position</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Manager</td>
    <td>alice@example.com</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Developer</td>
    <td>bob@example.com</td>
  </tr>
  <tr>
    <td>Charlie</td>
    <td>Designer</td>
    <td>charlie@example.com</td>
  </tr>
</table>

</body>
</html>

在这个HTML实例中，我们创建了一个带有条纹效果的表格，表头有绿色背景和白色文字，每个单元格都有适当的填充和边框。

结论

创建和格式化表格是一项基本技能，无论是在文档编辑器还是HTML中。一个良好格式化的表格不仅能有效传达信息，还能提升整体文档或网页的美观性和专业性。通过实践这些技巧和使用示例作为参考，你可以创建出既实用又吸引人的表格。

可以使用 HTML 创建表格。

实例

表格

[demo]

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<p>每个表格由 table 标签开始。</p>

<p>每个表格行由 tr 标签开始。</p>

<p>每个表格数据由 td 标签开始。</p>

<h4>一列：</h4>

<table border="1">

<tr>

<td>100</td>

</tr>

</table>

<h4>一行三列：</h4>

<table border="1">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

</table>

<h4>两行三列：</h4>

<table border="1">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

</body>

</html>

[/demo]

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

表格边框

[demo]

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h4>带有普通的边框：</h4>

<table border="1">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>带有粗的边框：</h4>

<table border="8">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>带有很粗的边框：</h4>

<table border="15">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

[/demo]

本例演示各种类型的表格边框。

表格

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

<table border="1">

<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>

在浏览器显示如下：

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

表格和边框属性

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

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

<table border="1">

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

表格的表头

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

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

<table border="1">

<tr>

<th>Heading</th>

<th>Another Heading</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>

在浏览器显示如下：

Heading Another Heading

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td></td>

<td>row 2, cell 2</td>

</tr>

</table>

表格中的空单元格

注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>row 2, cell 2</td>

</tr>

</table>

在浏览器中显示如下：

row 1, cell 1 row 1, cell 2

row 2, cell 2

更多实例

没有边框的表格

[demo]

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h4>这个表格没有边框：</h4>

<table>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

<h4>这个表格也没有边框：</h4>

<table border="0">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

</body>

</html>

[/demo]

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

表格中的表头(Heading)

[demo]

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h4>表头：</h4>

<table border="1">

<tr>

<th>姓名</th>

<th>电话</th>

<th>电话</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

<h4>垂直的表头：</h4>

<table border="1">

<tr>

<th>姓名</th>

<td>Bill Gates</td>

</tr>

<tr>

<th>电话</th>

<td>555 77 854</td>

</tr>

<tr>

<th>电话</th>

<td>555 77 855</td>

</tr>

</table>

</body>

</html>

[/demo]

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

空单元格

[demo]

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<table border="1">

<tr>

<td>Some text</td>

<td>Some text</td>

</tr>

<tr>

<td></td>

<td>Some text</td>

</tr>

</table>

<p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。</p>

<p>我们的技巧是在单元中插入一个 no-breaking 空格。</p>

<p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p>

<p>no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p>

</body>

</html>

[/demo]

本例展示如何使用 "&nbsp;" 处理没有内容的单元格。

带有标题的表格

[demo]

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h4>这个表格有一个标题，以及粗边框：</h4>

<table border="6">

<caption>我的标题</caption>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

</body>

</html>

[/demo]

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

跨行或跨列的表格单元格

[demo]

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h4>横跨两列的单元格：</h4>

<table border="1">

<tr>

<th>姓名</th>

<th colspan="2">电话</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

<h4>横跨两行的单元格：</h4>

<table border="1">

<tr>

<th>姓名</th>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">电话</th>

<td>555 77 854</td>

</tr>

<tr>

<td>555 77 855</td>

</tr>

</table>

</body>

</html>

[/demo]

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

表格内的标签

[demo]

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<table border="1">

<tr>

<td>

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

</td>

<td>这个单元包含一个表格：

<table border="1">

<tr>

<td>A</td>

<td>B</td>

</tr>

<tr>

<td>C</td>

<td>D</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>这个单元包含一个列表：

<ul>

<li>苹果</li>

<li>香蕉</li>

<li>菠萝</li>

</ul>

</td>

<td>HELLO</td>

</tr>

</table>

</body>

</html>

[/demo]

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

单元格边距(Cell padding)

[demo]

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h4>没有 cellpadding：</h4>

<table border="1">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>带有 cellpadding：</h4>

<table border="1"

cellpadding="10">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

[/demo]

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

单元格间距(Cell spacing)

[demo]

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h4>没有 cellspacing：</h4>

<table border="1">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>带有 cellspacing：</h4>

<table border="1"

cellspacing="10">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

[/demo]

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

向表格添加背景颜色或背景图像

[demo]

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h4>背景颜色：</h4>

<table border="1"

bgcolor="red">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>背景图像：</h4>

<table border="1"

background="./imagecopy1234567890/test.gif">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

[/demo]

本例演示如何向表格添加背景。

向表格单元添加背景颜色或者背景图像

[demo]

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h4>单元背景：</h4>

<table border="1">

<tr>

<td bgcolor="red">First</td>

<td>Row</td>

</tr>

<tr>

<td

background="./imagecopy1234567890/test.gif">

Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

[/demo]

本例演示如何向一个或者更多表格单元添加背景。

在表格单元中排列内容

[demo]

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<table width="400" border="1">

<tr>

<th align="left">消费项目....</th>

<th align="right">一月</th>

<th align="right">二月</th>

</tr>

<tr>

<td align="left">衣服</td>

<td align="right">1.10</td>

<td align="right">.20</td>

</tr>

<tr>

<td align="left">化妆品</td>

<td align="right">.00</td>

<td align="right">.45</td>

</tr>

<tr>

<td align="left">食物</td>

<td align="right">0.40</td>

<td align="right">0.00</td>

</tr>

<tr>

<th align="left">总计</th>

<th align="right">01.50</th>

<th align="right">4.65</th>

</tr>

</table>

</body>

</html>

[/demo]

本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。

框架(frame)属性

[demo]

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>

<p>Table with frame="box":</p>

<table frame="box">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>0</td>

</tr>

</table>

<p>Table with frame="above":</p>

<table frame="above">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>0</td>

</tr>

</table>

<p>Table with frame="below":</p>

<table frame="below">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>0</td>

</tr>

</table>

<p>Table with frame="hsides":</p>

<table frame="hsides">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>0</td>

</tr>

</table>

<p>Table with frame="vsides":</p>

<table frame="vsides">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>0</td>

</tr>

</table>

</body>

</html>

[/demo]

本例演示如何使用 "frame" 属性来控制围绕表格的边框。

表格标签

表格 描述

<table> 定义表格

<caption> 定义表格标题。

<th> 定义表格的表头。

<tr> 定义表格的行。

<td> 定义表格单元。

<thead> 定义表格的页眉。

<tbody> 定义表格的主体。

<tfoot> 定义表格的页脚。

<col> 定义用于表格列的属性。

<colgroup> 定义表格列的组。


在线咨询
上一篇：技术贴：一篇文章看懂链接（超链接）设计
下一篇：日历签到和积分累计的php实现方法

您的项目需求

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

推荐阅读
友情链接 梅列区 鹤岗 振兴区 资中县 柳河县 曲松县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服