HTML表格排版详解-优快云博客

本文链接：https://blog.youkuaiyun.com/fengwx0413/article/details/5862609

网页表格标记

制作表格

表格是用于排列内容的最佳手段，在html页面中，绝大多数页面都是使用表格进行排版的。在html的语法中，表格主要通过3个标记来构成，表格标记、行标记、单元格标记。表格标记

标记描述

<table>…</table> 表格标记

<tr>…</tr> 行标记

<td>…</td> 单元格标记

基本语法

<table>

<tr>

…

</tr>

<tr>

…

</tr>

…

</table>

语法解释

<table>标记代表表格的开始，<tr>标记代表行开始，而<td>和</td>之间的就是单元格的内容。这几个标记之间是从大到小，逐层包含的关系，由最大的表格到最小的单元格。一个表格可以有多个<tr>和<td>标记，分别代表多行和多个单元格。

表格的边框属性border

默认情况下，表格的边框为0，我们可以为表格设置边框线。

基本语法

语法解释

通过border属性定义边框线的宽度，单位为像素。

表格的宽度和高度属性width、height

默认情况下，表格的宽度和高度根据内容自动调整，我们也可以手动设置表格的宽度和高度。

基本语法

语法解释

通过width属性定义表格的宽度，height属性定义表格的高度，单位是像素或百分比。如果是百分比，则可分为两种情况：如果不是嵌套表格，那么百分比是相对于浏览器窗口而言；如果是嵌套表格，则百分比相对的是嵌套表格所在的单元格宽度。

表格的边框色属性bordercolor

为了美化表格，可以为表格设定不同的边框颜色。

基本语法

语法解释

定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。

表格的亮边框色属性bordercolorlight

在表格中可以单独定义左上边框的颜色，也可以定义单元格中右下边框的颜色，这两个位置的边框色我们称之为亮边框。

基本语法

语法解释

定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。

<tr>

<td>网页图像软件</td><td>Fireworks</td>

</tr>

<tr>

<td>网页制作软件</td><td>Dreamweaver</td>

</tr>

<tr>

<td>网页动画软件</td><td>Flash</td>

</tr>

</table>

表格的暗边框色属性bordercolordark

在表格中，可以单独定义右下边框的颜色，也可以定义单元格中左上边框的颜色，这两个位置的边框色我们称之为暗边框色。

基本语法

语法解释

定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。

<tr>

<td>网页图像软件</td><td>Fireworks</td>

</tr>

<tr>

<td>网页制作软件</td><td>Dreamweaver</td>

</tr>

<tr>

<td>网页动画软件</td><td>Flash</td>

</tr>

</table>

表格的背景颜色属性bgcolor

通过bgcolor属性，可以设定表格的背景颜色。

基本语法

语法解释

定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。

表格的背景图像属性background

为表格设置背景图像，可以使用任何的GIF或者JPEG图片文件。

基本语法

语法解释

定义背景图像时，写下图片文件的完整路径或者相对路径。

单元格间距属性cellspacing

表格的单元格和单元格之间，可以设定一定的距离，这样可以使表格显得不会过于紧凑。

基本语法

语法解释

单元格的间距以像素为单位

<tr>

<td>网页图像软件</td><td>Fireworks</td>

</tr>

<tr>

<td>网页制作软件</td><td>Dreamweaver</td>

</tr>

<tr>

<td>网页动画软件</td><td>Flash</td>

</tr>

</table>

单元格边距属性cellpadding

单元格边距是指单元格内容和边框之间的距离

基本语法

语法解释

单元格的边距以像素为单位

<tr>

<td>网页图像软件</td><td>Fireworks</td>

</tr>

<tr>

<td>网页制作软件</td><td>Dreamweaver</td>

</tr>

<tr>

<td>网页动画软件</td><td>Flash</td>

</tr>

</table>

表格的水平对齐属性align

在水平方向上，可以设定表格的对齐方式，分别有居左、居中、居右3种。

基本语法

语法解释

Left为居左，Center为居中，Right为居右。

<caption align="Right">主流的网页设计软件</caption>

<tr>

<td>网页图像软件</td><td>Fireworks</td>

</tr>

<tr>

<td>网页制作软件</td><td>Dreamweaver</td>

</tr>

<tr>

<td>网页动画软件</td><td>Flash</td>

</tr>

</table>

表格的边框样式属性frame

使用Frame属性可以控制表格边框的样式类型

基本语法

语法解释

value的取值如下表所示

表格的边框样式

属性值描述

Above 显示上边框

Below 显示下边框

Border 显示上下左右边框

Box 显示上下左右边框

Hsides 显示上下边框

Lhs 显示左边框

Rhs 显示右边框

Void 不显示边框

Vsides 显示左右边框

<tr>

<td>网页图像软件</td><td>Fireworks</td>

</tr>

<tr>

<td>网页制作软件</td><td>Dreamweaver</td>

</tr>

<tr>

<td>网页动画软件</td><td>Flash</td>

</tr>

</table>

表格的内部边框样式属性rules

通过rules可以控制表格内部边框的样式。

基本语法

语法解释

value的取值如下表所示

表格的内部边框样式

属性值描述

All 显示所有的内部边框

Cols 仅显示行边框

Groups 显示介于行列间的边框

None 不显示内部边框

Rows 仅显示列边框

<tr>

<td>网页图像软件</td><td>Fireworks</td>

</tr>

<tr>

<td>网页制作软件</td><td>Dreamweaver</td>

</tr>

<tr>

<td>网页动画软件</td><td>Flash</td>

</tr>

</table>

表格标题<caption>

在html语言中，可以自动通过标记为表格添加标题。另外表格的第一行称为表头，这也可以通过html标记来实现。通过这个标记可以直接添加表格的标题，而且可以控制标题文字的排列属性。

基本语法

语法解释

<caption>标记之间的就是标题的内容，这个标记使用在<table>标记中。

表格标题的水平对齐属性align

默认情况下，表格的标题水平居中，我们可以通过align属性设定标题文字的水平对齐方式。

基本语法

语法解释

Left为居左，Center为居中，Right为居右

表格标题的垂直对齐属性valign

表格的标题可以放在表格的上方或者下方，这可以通过属性进行调整。默认的表格标题放在表格上方。

基本语法

语法解释

Top为居上，Bottom为居底。

表格的表头<th>

表头是指表格的第一行，其中的文字可以实现居中并且加粗显示，这通过<th>标记实现。

基本语法

<table>

<tr>

…

</tr>

<tr>

…

</tr>

…

</table>

语法解释

使用<th>标记替代<td>标记，惟一的不同就是标记中的内容居中加粗显示。

表头标记<th>属性

<th>标记用于设定表格中某一表头的属性。

表头的<th>标记属性

属性描述

align 水平对齐

valign 单元格内容的垂直对齐

bgcolor 单元格的背景颜色

background 单元格的背景图像

bordercolor 单元格的边框颜色

bordercolorlight 单元格的亮边框颜色

bordercolordark 单元格的暗边框颜色

width 单元格的宽度

height 单元格的高度

表头的背景色属性bgcolor

通过bgcolor属性，可以设定表头的背景颜色。

基本语法

语法解释

定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。

表头的背景图像属性background

为表头设置背景图像，可以使用任何GIF或者JPEG图片文件。

基本语法

语法解释

定义背景图像时，写下图片文件的完整路径或者相对路径。

表头的边框色属性bordercolor

为了美化表格，可以为表头设定不同的边框颜色。

基本语法

语法解释

定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。

表头的亮边框色属性bordercolorlight

在表头中，可以单独定义亮边框色。

基本语法

语法解释

定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。

表头的暗边框色属性bordercolordark

在表头中，可以单独定义暗边框色。

基本语法

语法解释

定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。

表头的宽度和高度属性width、height

默认情况下，表头的宽度高度根据内容自动调整，我们也可以手动设置表头的宽度和高度。

基本语法

语法解释

通过属性定义表头的宽度，属性定义表头的高度，单位为像素或百分比。

表头的水平对齐属性align

在水平方向上，可以设定表头的对齐方式，分别有居左、居中、居右3种。

基本语法

语法解释

Left为居左，Center为居中，Right为居右。

表头的垂直对齐属性valign

在垂直方向上，可以设定表头的对齐方式，分别有居上、居中、居下3种。

基本语法

语法解释

Top为居上，Middle为居中，Bottom为居下。

行标记<tr>属性

<tr>标记的属性用于设定表格中每一行的属性，如下表所示

表格的<tr>标记属性

属性描述

align 行内容的水平对齐

valign 行内容的垂直对齐

bgcolor 行的背景颜色

bordercolor 行的边框颜色

bordercolorlight 行的亮边框颜色

bordercolordark 行的暗边框颜色

行的背景色属性bgcolor

通过bgcolor属性，可以设定行的背景颜色。

基本语法

语法解释

定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。

行的边框色属性bordercolor

为了美化表格，可以为行设定不同的边框颜色。

基本语法

语法解释

定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。

<td>网页图像软件</td><td>Fireworks</td>

</tr>

<tr>

<td>网页制作软件</td><td>Dreamweaver</td>

</tr>

<tr>

<td>网页动画软件</td><td>Flash</td>

</tr>

</table>

行的亮边框色属性bordercolorlight

在行中，可以单独定义亮边框色。

基本语法

语法解释

定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。

行的暗边框色属性bordercolordark

在行中，可以单独定义暗边框色。

基本语法

语法解释

定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。

行的水平对齐属性align

在水平方向上，可以设定行的对齐方式，分别有居左、居中、居右3种。

基本语法

语法解释

Left为居左，Center为居右，Right为居右。

<td>网页图像软件</td><td>Fireworks</td>

</tr>

<tr>

<td>网页制作软件</td><td>Dreamweaver</td>

</tr>

<tr>

<td>网页动画软件</td><td>Flash</td>

</tr>

</table>

行的垂直对齐属性valign

在垂直方向上，可以设定行的对齐方式，分别有居上、居中、居下3种。

基本语法

语法解释

Top为居上，Middle为居中，Bottom为居下。

单元格标记<td>属性

<td>标记的属性用于设定表格中某一单元格的属性

表格的<td>标记属性

属性描述

align 单元格内容的水平对齐

valign 单元格内容的垂直对齐

bgcolor 单元格的背景颜色

background 单元格的背景图像

bordercolor 单元格的边框颜色

bordercolorlight 单元格的亮边框颜色

bordercolordark 单元格的暗边框颜色

width 单元格的宽度

height 单元格的高度

单元格的背景色属性bgcolor

通过bgcolor属性，可以设定单元格的背景颜色。

基本语法

语法解释

定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。

单元格的背景图像属性background

我们可以为单元格设置背景图像，可以使用任何GIF或者JPEG图片文件。

基本语法

语法解释

定义背景图像时，写下图片文件的完整路径或者相对路径。

单元格的边框色属性bordercolor

为了美化表格，可以为单元格设定不同的边框颜色。

基本语法

语法解释

定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。

单元格的亮边框色属性bordercolorlight

在单元格中，可以单独定义亮边框色。

基本语法

语法解释

定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。

单元格的暗边框色属性bordercolordark

在单元格中，可以单独定义暗边框色。

基本语法

语法解释

定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。

单元格的宽度和高度属性width、height

默认情况下，单元格的宽度和高度根据内容自动调整，我们也可以手动设置单元格的宽度和高度。

基本语法

语法解释

通过width属性定义单元格的宽度，height属性定义单元格的高度，单位为像素或百分比。

<tr>

<td width=300 height=50>网页图像软件</td><td>Fireworks</td>

</tr>

<tr>

<td>网页制作软件</td><td>Dreamweaver</td>

</tr>

<tr>

<td>网页动画软件</td><td>Flash</td>

</tr>

</table>

单元格的水平对齐属性align

在水平方向上，可以设定单元格的对齐方式，分别有居左、居中、居右3种。

基本语法

语法解释

Left为居左，Center为居中，Right为居右。

单元格的垂直对齐属性valign

在垂直方向上，可以设定单元格的对齐方式，分别有居上、居中、居下3种。

基本语法

语法解释

Top为居上，Middle为居中，Bottom为居下。

跨行属性rowspan

在复杂的表格结构中，有的单元格在水平方向上是跨多个单元格的，这就需要使用跨行属性rowspan。

基本语法

语法解释

value代表单元格跨的行数

<tr>

</tr>

<tr>

<td rowspan=3>网页制作软件</td>

<td>Fireworks</td>

</tr>

<tr>

<td>Dreamweaver</td>

</tr>

<tr>

<td>Flash</td>

</tr>

</table>

跨列属性colspan

在复杂的表格结构中，有的单元格在垂直方向上是跨多个单元格的，这就需要使用跨列属性colspan。

基本语法

语法解释

value代表单元格跨的列数。

<tr>

<td colspan=2 align="Center">网页制作软件</td>

</tr>

<tr>

<td>网页图像软件</td><td>Fireworks</td>

</tr>

<tr>

<td>网页制作软件</td><td>Dreamweaver</td>

</tr>

<tr>

<td>网页动画软件</td><td>Flash</td>

</tr>

</table>

表格的表首标记<thead>

为了在源代码中清楚地区分表格结构，html语言中规定了<thead>、<tbody>、<tfoot>3个标记，分别对应与表格的表首、表主体和表尾。<thead>标记用于定义表格最上端表首的样式。

基本语法

语法解释

align代表水平对齐，其中Left为居左，Center为居中，Right为居右。valign代表垂直对齐，Top为居上，Middle为居中，Bottom为居下。

<tr>

<td colspan=2>网页制作软件</td>

</tr>

</thead>

<tr>

<td>网页图像软件</td><td>Fireworks</td>

</tr>

<tr>

<td>网页制作软件</td><td>Dreamweaver</td>

</tr>

<tr>

<td>网页动画软件</td><td>Flash</td>

</tr>

</table>

表格的表主体标记<tbody>

<tbody>标记用于定义表格主体的样式

基本语法

语法解释

align代表水平对齐，其中Left为居左，Center为居中，Right为居右。vlign代表垂直对齐，Top为居上，Middle为居中，Bottom为居下。

<tr>

<td colspan=2>网页制作软件</td>

</tr>

</thead>

<tr>

<td>网页图像软件</td><td>Fireworks</td>

</tr>

<tr>

<td>网页制作软件</td><td>Dreamweaver</td>

</tr>

<tr>

<td>网页动画软件</td><td>Flash</td>

</tr>

</tbody>

</table>

表格的表尾标记<tfoot>

<tfoot>标记用于定义表尾的样式

基本语法

语法解释

align代表水平对齐，其中Left为居左，Center为居中，Right为居右。valign代表垂直对齐，Top为居上，Middle为居中，Bottom为居下。

<tr>

<td colspan=2>网页制作软件</td>

</tr>

</thead>

<tr>

<td>网页图像软件</td><td>Fireworks</td>

</tr>

<tr>

<td>网页制作软件</td><td>Dreamweaver</td>

</tr>

<tr>

<td>网页动画软件</td><td>Flash</td>

</tr>

</tbody>

<tr>

</tr>

</tfoot>

</table>

表格嵌套

在页面中，排版是通过表格的嵌套来完成的。即一个表格内部可以套入另一个表格。原因如下：

首先，网页的排版会很复杂，在外部需要有一个表格控制总体布局。如果这时一些内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格制作带来困难。

其次，浏览器在解析网页的时候，是将整个表格的结构下载完毕之后才显示表格。如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到网页的内容。

出于这些原因，引入嵌套表格。由总表格负责整体的排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中。这样一来各司其职，互不冲突。

<tr>

<tr>

<td align="Center">Macromedia网页设计师</td>

</tr>

<tr>

<td align="Center">网页设计软件</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>网页图像软件</td><td>Fireworks</td>

</tr>

<tr>

<td>网页制作软件</td><td>Dreamweaver</td>

</tr>

<tr>

<td>网页动画软件</td><TD>Flash</td>

</tr>

</table>

HTML 基础教程（七）