html表格的完整代码示范 html编写表格 收藏 0

HTML标签之表格标签

表格是页面中常见的一中标签，通常是用来数据展示的，而不是用来布局。

• 语法

<table>

<tr>

<td>单元格内的文字</td>

…

</tr>

…

</table>

• 说明
• table 标签：定义一个表
• tr 标签：定义表格中的一行，必须嵌套在table标签中，有几对，表示表格有几行
• td 标签：定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就表示该行中有多少列（或多少个单元格）

• 注意
• 中只能嵌套
• 标签，就像一个容器，可以容纳所有的元素

设置表格的外观样式

• 说明
• 表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可
• 示例

• 代码

<table border=1>

<tr>

<th>姓名</th>

<th>性别</th>

<th>电话</th>

</tr>

<tr>

<th>张三</th>

<td>女</td>

<td>18611110000</td>

</tr>

<tr>

<th>李四</th>

<td>男</td>

<td>18711110000</td>

</tr>

<tr>

<th>王五</th>

<td>男</td>

<td>18811110000</td>

</tr>

</table>

表格标题标签，为表格添加标题，跟随表格的位置而移动。设置标题，我们用的是caption标签。

• 语法

<table border=\”1\”>

<caption style=\”text-align:left\”>My savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

</tr>

</table>

• 说明

将标题定位在表格的左|右|上|下位置。

• 示例

• 分类

跨行合并 rowspan=“合并单元格的个数”

跨列合并 colspan=“合并单元格的个数”

合并顺序：先上后下，先左后右

• 代码

…

“`

• 合并方法：

（1）先确定是跨行还是跨列合并

（2）根据先上后下，先左后右的原则，找到目标单元格，写上合并方式（rowspan/colspan）和要合并的单元格数量

（3）删除多余的单元格

表格的结构划分，使用thead、tbody 、tfoot 三种标签

• 说明
• 标签用于组合 HTML 表格的表头内容 元素应该与和元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）
• 语法

<table border=\”1\”>

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tfoot>

<tr>

<td>Sum</td>

<td>$180</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$80</td>

</tr>

</tbody>

</table>

• 提示

（1） 元素内部必须包含一个或者多个 标签。

（2） thead, tbody, 和 tfoot 元素默认不会影响表格的布局。用途主要是可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

学习CSS布局：简单表格布局代码示例

CSS是现代Web设计和开发的必备技能之一。而表格布局是Web页面中常用的布局之一，用于展示数据和信息。在这篇文章中，我们将介绍如何使用CSS创建一个简单的表格布局，并提供代码示例，帮助您更好地了解CSS的表格布局。

HTML代码

在CSS中创建表格布局之前，我们首先需要创建表格结构的HTML代码。下面是一个简单的表格结构的HTML代码示例：

html

<table>

<thead>

<tr>

<th>姓名</th>

<th>年龄</th>

<th>性别</th>

</tr>

</thead>

<tbody>

<tr>

<td>张三</td>

<td>20</td>

<td>男</td>

</tr>

<tr>

<td>李四</td>

<td>25</td>

<td>女</td>

</tr>

<tr>

<td>王五</td>

<td>30</td>

<td>男</td>

</tr>

</tbody>

</table>

在这个示例中，我们使用<table>元素创建了一个表格，使用<thead>元素创建了表格头部，使用<tbody>元素创建了表格主体，使用<tr>元素创建了表格行，使用<th>和<td>元素分别创建了表格头和单元格。

CSS代码

在HTML代码完成后，我们需要使用CSS样式来创建表格布局。下面是一个简单的CSS样式代码示例：

css

table {

border-collapse: collapse;

width: 100%;

text-align: center;

}

thead th {

background-color: #eee;

font-weight: bold;

}

tbody td {

border: 1px solid #ddd;

padding: 8px;

}

tbody tr:nth-child(even) {

background-color: #f2f2f2;

}

在这个示例中，我们使用了border-collapse属性来将表格边框合并为单一的边框，使用width属性将表格宽度设置为100%，使用text-align属性将表格内容居中对齐。使用thead和tbody选择器来定义表格头和表格主体的样式，使用background-color属性来设置表格头的背景颜色和字体加粗，使用border和padding属性来定义表格单元格的边框和内边距，使用nth-child伪类选择器来为奇数行和偶数行设置不同的背景颜色。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com