所在的位置: html >> html发展 >> HTML表格table标签

HTML表格table标签

白癫风多少钱可治好 http://news.39.net/bjzkhbzy/180522/6273005.html

通过表格标签table/table在网页中绘制表格。

HTML表格

语法:

tabletrth列1/thth列2/th....../trtrtd列1行1/tdtd列2行1/td....../tr....../table语法说明

表格以table/table标签定义。

tr/tr标签定义一行数据,如果要定义多行数据,就重复使用tr/tr标签。

每一行中又包括一个或多个td/td标签定义的单元格。

th/th定义表头信息,通常里面的内容也是粗体显示的。

例子:

tableborder="1"trth编号/thth题目/thth操作/th/trtrtd1/tdtd文章一/tdtd修改删除/td/trtrtd2/tdtd文章二/tdtd修改删除/td/tr/table

显示效果如下:

编号题目操作1文章一修改删除2文章二修改删除表格表头

表格中的表头使用th/th来定义,但不是定义表格必需的。表头文字默认会以粗体显示,如上例所示。

空单元格

实际情况中,可能会有单元格没有数据。如果对没有数据的空单元格不加以定义,可能会导致表格显示不友好。一个解决办法是定义空的单元格,但在空单元格里使用一个空格。

表格美化

在上例表格标签中,我们使用了border(边界)属性,设定为1,否则表格将不显示边缘,我们也看不出表格效果。

默认的表格显示是比较难看的,如果需要对它进行美化,做出漂亮的表格来,可以通过CSS样式表进行控制:

.table{width:90%;border-collapse:collapse;border:1pxsolidblack;line-height:1.5em;}.tablecaption{line-height:1.8em;text-align:left;}.tableth{border:1pxsolidgray;padding:2px;background-color:#CCCCCC;}.tabletd{border:1pxsolidgray;padding:3px02px5px;background:#F6F6F6;}

HTML代码如下:

tableclass="table"caption这是caption标签/captiontrthwidth="20%"这是表格头/ththwidth="40%"这是表格头/thth这是表格头/th/trtrtd表格正文内容/tdtd表格正文内容/tdtd表格正文内容/td/trtrtd表格正文内容2/tdtd表格正文内容2/tdtd表格正文内容2/td/tr/table

效果如下:

这是caption标签这是表格头这是表格头这是表格头表格正文内容表格正文内容表格正文内容表格正文内容2表格正文内容2表格正文内容2

CSS样式表更多关与表格的信息,请参考《CSS表格》。

表格布局

在DIV+CSS布局兴起之前,表格曾广泛用于网页布局。表格可以设置宽度,高度以及可以分割成多个单元格,以及简单可视化的效果,非常用于简单的布局效果。实际上在目前很多应用中,也可以充分利用表格来进行布局,如论坛列表等。

将表格边缘(border)取消掉后,即可隐藏表格的显示,以达到表格布局的效果,具体不展开论述。

预览时标签不可点收录于合集#个


转载请注明:http://www.aierlanlan.com/tzrz/1066.html