12.HTML创建和格式化表格

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

创建表格

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

插入表格：打开文档编辑器，例如Microsoft Word，找到“插入”选项卡，点击“表格”，选择需要的行数和列数。
输入数据：点击表格中的单元格，开始输入数据。可以使用Tab键在单元格之间跳转。
调整行列：根据需要调整行高和列宽。在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> 标签定义标准单元格。

格式化表格

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

文档编辑器中的格式化

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

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的表格，显示一个小型团队的成员信息。

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

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 元素提供附加信息。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<a href="http://www.w3school.com.cn">This is a link</a>

更多 HTML 属性实例

属性例子 1:

<h1> 定义标题的开始。

<h1 align="center"> 拥有关于对齐方式的附加信息。

属性例子 2:

<body> 定义 HTML 文档的主体。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

属性例子 3:

<table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）

<table border="1"> 拥有关于表格边框的附加信息。

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

HTML 属性参考手册

我们的完整的 HTML 参考手册提供了每个 HTML 元素可使用的合法属性的完整列表：

下面列出了适用于大多数 HTML 元素的属性：

序列表和有序列表

用于呈现逻辑上并列的具有相关性的数据内容.

<ul>
<li></li>
</ul>

ul元素可以用type属性设置不同的列表标记:

disc: 实心圆点

circle: 空心圆圈

square: 实心正方形

<ol>
<li></li>
</ol>

ol元素也可以设置不同的标记:

1: 阿拉伯数字

i: 小写罗马数字

I: 大写罗马数字

A: 大写字母

a: 小写字母

定义列表

适用呈现包含主题及描述的数据内容.

<dl>
<dt>主题</dt>
<dd>描述</dd>
</dl>

表格

<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>

thead: 表头

tbody: 表体

tfoot: 表脚

th: 专用于表头中的单元格, 其具有自动加粗并且居中的效果.

表格的属性控制:

border: 边框

bordercolor: 边框颜色

width: 宽度

height: 高度

cellspacing: 单元格间距(外)

cellpadding: 单元格填充(内)

align: 表格的位置控制

单元格的属性控制:

align

valign

如何合并单元格/跨行或跨列?

注意: 合并后, 会引发单元格数量的减少!

列表练习案例源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我的电脑文件列表</h1>
<ul>
<li>我的电脑
<ul>
<li>本地磁盘(C:)
<ul>
<li>我的文档</li>
<li>我的收藏</li>
</ul>
</li>
<li>本地磁盘(D:)
<ul>
<li>我的游戏</li>
<li>我的资料</li>
<li>我的电影</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

在线咨询

上一篇：CSS段落对齐方式，系统认识块级元素与内联元素，CSS前端进阶篇
下一篇：用 Java 拿下 HTML 分分钟写个小爬虫

您的项目需求

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

整合营销服务商