网页制作:深入Table(表格)世界

表格(table)是一直以来长期被大家使用的标签,直到现在还是在用,不过呢因为现在的网站重构,建议大家不要表格(table)来布局而很多朋友误以为用表格(table)就是所谓的不标准了,其实不然,表格(table)是一个重要元素。

表格标签主要包含的标签有table、caption、th、tr、td、thead、tfoot、tbody、col、colgroup,针对每个的介绍如下:

<table>

table标签可定义表格。在 <table> 标签内部,你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。

<caption>

caption 元素可定义一个表格标题。caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

<th>

定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体。

<tr>

在表格中定义一行。

<td>

定义表格中的一个单元格。

<thead>

定义表格的表头。

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

<tbody>

定义一段表格主体(正文)。

使用 <tbody> 标签,可以将表格分为一个单独的部分。<tbody> 标签可将表格中的一行或几行合成一组。

虽然您可能想包括一个,甚至会在表格中包括两个或更多个 <tbody> 标签,但是我们建议最好在表格中没有 <tbody> 标签。

在 <tbody> 标签中,只有 <tr> 标签可以定义表格行。并且一旦定义,一个 <tbody> 标签就是表格中的一个独立的部分。例如不能从一个 <tbody> 跨越到另一个 <tbody> 中。

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

<tfoot>

定义表格的页脚(脚注)。

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

<col>

定义某个表格中针对一个或多个列的属性值。您只能在表格或 colgroup 中使用此属性。

<colgroup>

定义表格列的分组。通过此元素,您可以对列进行组合以便进行格式化。此元素只有在 <table> 标签内部才是合法的。

有两种方式来使用 <colgroup> 标签:一种是对几个同样的列进行简单的定义,另一种是将几个不同的列组合起来。

时间: 2024-10-02 22:51:41

网页制作:深入Table(表格)世界的相关文章

网页有个table表格,通过条件【表格的列名】来控制表格的显示内容,选中后回到页面,不在显示此列

问题描述 网页有个table表格,通过条件[表格的列名]来控制表格的显示内容,选中后回到页面,不在显示此列 解决方案 服务端如果是asp,没选上职业就不要生成对应这个 的输出.服务端如果是asp.net,模板中给每个设一个id:没选上职业就把对应元素的 visible 设为 false 就可以了.

美化网页 制作精美圆角表格

网页|圆角 做网页时候为了美化网页,常常把表格边框的拐角处做成圆角,这样可以避免直接使用表格直角的生硬,使得网页整体更加美观.下面就给大家介绍两种制作圆角表格的常用的办法. 方法一:用图片制作圆角表格 这是最常用也是最通用的方法,它能很好地适应各种浏览器和不同分辨率,大部分网页都使用这种方法. ①先用Photoshop等作图软件绘制一个圆角矩形,再用"矩形选框工具"选取左上交的圆角部分(如图1),复制它. ②不要取消选取,直接新建一副图像,Photoshop会根据选取部分的高度.宽度自

美化你的网页 制作精美圆角表格的两种方法

网页|圆角 做网页时候为了美化网页,常常把表格边框的拐角处做成圆角,这样可以避免直接使用表格直角的生硬,使得网页整体更加美观.下面就给大家介绍两种制作圆角表格的常用的办法.方法一:用图片制作圆角表格这是最常用也是最通用的方法,它能很好地适应各种浏览器和不同分辨率,大部分网页都使用这种方法. ①先用Photoshop等作图软件绘制一个圆角矩形,再用"矩形选框工具"选取左上交的圆角部分(如图1),复制它. ②不要取消选取,直接新建一副图像,Photoshop会根据选取部分的高度.宽度自动设

Dreamweaver网页制作教程:表格设计

dreamweaver|教程|设计|网页 表格设计 表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.本节教程我们分为两步来进行.首先看表格操作的一个实例.然后来看一些表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实例 这幅页面

学习网页制作基础入门教程(7)表格标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 学习网页制作基础入门教程(6)连接标签 表格单元格对齐位置设定 1. 首先我们来看一个最简单的表格: 原始代码 显示结果 <TABLE BORDER=1><TR><TD>1</TD></TR></TABLE&g

《HTML、CSS、JavaScript 网页制作从入门到精通》——第6章 使用表格

第6章 使用表格 表格是网页制作中使用最多的工具之一,在制作网页时,使用表格可以更清晰地排列数据.但在实际制作过程中,表格更多地用在网页布局定位上.很多网页都是以表格布局的,这是因为表格在文本和图像的位置控制方面都有很强的功能.灵活.熟练地使用表格,在网页制作时会有如虎添翼的感觉. 学习目标 掌握创建表格 掌握设置表格基本属性 掌握设置表格的边框 掌握设置表格背景 掌握设置表格的行属性 掌握调整单元格属性 6.1 创建表格 表格是网页排版布局不可缺少的一个工具,能否熟练地运用表格将直接影响到网页

网页制作 用Dreamweaver制作细边表格

dreamweaver|网页 在Dreamweaver中插入一个表格,若设置其"边框(Border)"为1,预览时其边框线较粗.对于不熟悉HTML语言的网页制作者,如何快速制作出细边线的表格呢?下面,我给大家介绍一个小技巧--巧用背景颜色和间距制作细边线表格. 以制作一个4行3列.边框线为红色细线的表格为例: Step 1 在Dreamweaver的设计视图中插入一个4行3列的表格. Step 2 在"属性"面板中设置此表格的属性如下:边距(cellpadding)

Dreamweaver网页制作之表格设计

表格设计 表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.本节教程我们分为两步来进行.首先看表格操作的一个实例.然后来看一些表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实例 这幅页面的排版格式,如果用以前我们所讲的对齐方式是

《HTML、CSS、JavaScript 网页制作从入门到精通》——6.2 表格基本属性

6.2 表格基本属性 HTML.CSS.JavaScript 网页制作从入门到精通为了使所创建的表格更加美观.醒目,需要对表格的属性进行设置,主要包括表格的宽度.高度和对齐方式等. 6.2.1 表格宽度width可以使用表格的width属性来设置表格的宽度.如果不指定表格宽度,浏览器就会根据表格内容的多少自动调整宽度. 语法: 说明: 表格宽度的值可以是像素值,也可以为百分比. 举例: 在代码中加粗部分的代码标记是设置表格的宽度为500像素,在浏览器中预览可以看到效果如图6.5所示. 6.2.2