正文

HTML5编写简单表格全攻略：轻松上手，快速制作实用表格攻略

/0 浏览量
0821

在网页设计中，表格是一个非常重要的元素，用于展示数据、进行内容组织或实现布局。HTML5提供了丰富的标签和属性，使得创建表格变得简单而高效。本文将带你轻松上手，快速制作出实用的表格。

表格基础

1. 表格结构

一个基本的HTML5表格由以下几个部分组成：

  • <table>：定义表格
  • <tr>：定义表格行
  • <td>：定义表格单元格

2. 表格属性

  • border：设置表格边框宽度，默认为0
  • width：设置表格宽度，单位可以是像素或百分比
  • height：设置表格高度，单位可以是像素或百分比
  • align：设置表格水平对齐方式，可选值有left、center、right
  • valign：设置表格垂直对齐方式，可选值有top、middle、bottom、baseline

创建表格

1. 基本表格

以下是一个简单的HTML5表格示例：

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>21</td>
    <td>女</td>
  </tr>
</table>

2. 复杂表格

在实际应用中，表格可能包含合并单元格、排序等功能。以下是一个带有合并单元格和排序功能的表格示例：

<table border="1">
  <tr>
    <th rowspan="2">姓名</th>
    <th colspan="2">成绩</th>
  </tr>
  <tr>
    <th>语文</th>
    <th>数学</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>90</td>
    <td>95</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>85</td>
    <td>80</td>
  </tr>
</table>

表格样式

HTML5表格可以通过CSS进行美化。以下是一个简单的表格样式示例：

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

总结

通过以上内容，相信你已经对HTML5表格有了基本的了解。在实际应用中，可以根据需求调整表格的结构和样式，使表格更加美观和实用。希望这篇文章能帮助你轻松上手，快速制作出满意的表格。

-- 展开阅读全文 --