这是一个表格:
名字 | 班级 | 年龄 |
---|---|---|
张华 | 一年级一班 | 7岁 |
杨梅 | 一年级三班 | 7岁 |
HTML 表格由 <table> 标签来定义。
HTML 表格是一种用于展示结构化数据的标记语言元素。
每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义),表格可以包含标题行(<th>)用于定义列的标题
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
以上的表格实例代码中,<table> 元素表示整个表格,它包含三个主要部分:<thead>头部 、<tbody>主体 和 <tfoot>底部。
<thead> 用于定义表格的标题部分: 在 <thead > 中,使用 <th > 元素定义列的标题,以上实例中列标题分别为"列标题1","列标题2"和"列标题3"。
<tbody> 用于定义表格的主体部分: 在 <tbody > 中,使用 <tr > 元素定义行,并在每行中使用 <td > 元素定义单元格数据,以上实例中有两行数据,每行包含三个单元格。
通过使用
HTML 表格还可以具有其他部分,如
HTML 表格还支持合并单元格和跨行/跨列的操作,以及其他样式和属性的应用,以满足各种需求。
我们也可以使用 CSS 来进一步自定义表格的样式和外观。
实际上我们可以不用添加<thead> 和 <tbody>,因为浏览器会给我们自动添加,我们只写 table tr th td 即可,<tfoot>也可以不使用,用了和不用的效果一样。
名称 | 类型 | 说明 |
---|---|---|
height | 属性 | 规定表格的高度,也可以使用CSS代替 |
colspan | 属性 | 规定当前单元格合并横向多少个单元格 |
rowspan | 属性 | 规定当前单元格合并纵向多少个单元格 |
colgroup | 标签 | 规定表格中包含一列或多列的分组的格式 |
col | 标签 | 为表格中一个或多个列定义属性值,在colgroup里使用 |
名称 | 类型 | 说明 |
---|---|---|
|
属性 | 规定外侧边框的哪个部分是可见的。不推荐使用,CSS代替 |
|
属性 | 规定单元格内容与其边框之间的空白,不推荐使用,CSS代替 |
|
属性 | 用于表格边框线,不推荐使用,CSS代替 |
|
属性 | 规定单元格文字居左中右,不推荐使用,CSS代替 |
|
属性 | 规定表格宽度,不推荐使用,CSS代替 |
|
属性 | 规定表格背景颜色,不推荐使用,CSS代替 |
|
属性 | 规定表格背景(颜色或图片),不推荐使用,CSS代替 |
|
标签 | 用于标题,居中显示,不推荐使用,可使用h1标签替代 |
查看下面的实例,熟悉属性的使用及CSS替代样式。
本例演示一个没有边框的表格。
本例演示如何显示表格表头。
本例演示如何定义跨行或跨列的表格单元格并使用CSS样式规定了边框。
本例演示如何显示在不同的元素内显示元素。
本例演示如何向表格添加背景,CSS样式方式。
本例演示使用CSS方式控制单元格内容居左中右,“align”属性不赞成使用。