HTML表格标记详细讲解(适合初学者)

2020-03-24 17:25:24

字体：大中小

来源：转载

供稿：网友

■ TABLE TR TD ：这三个标记是定义表格的最重要的标记，可以说只学这三个己足够。 TABLE 是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的范围内才适用，属容器标记的还有其他。
TR 用以标示表格列（row）
TD 用以标示储存格（cell） TABLE 的参数设定（常用）：例如： table width= 400 border= 1 cellspacing= 2 cellpadding= 2 align= CENTER valign= TOP background= myweb.gif bgcolor= #0000FF bordercolor= #FF00FF bordercolorlight= #00FF00 bordercolordark= #00FFFF cols= 2 width= 400
表格宽度，接受绝对值（如 80）及相对值（如 80%）。 border= 1
表格边框厚度，不同浏览器有不同的内定值，故请指明。 cellspacing= 2
表格格线厚度，请看例子三，那是加厚到 5 的格线。 cellpadding= 2
文字与格线的距离，请看例子四，那是加至 10 的 padding。 align= CENTER
表格的摆放位置（水平），可选值为： left, right, center，请看例子五或六，那表格是放于中间的，为怕一些浏览器不支援，故特加上居中标记 CENTER ，只是多层保证而己，当然只用 CENTER 亦可。 valign= TOP .
表格内字画等的摆放贴位置（垂直），可选值为： top, middle, bottom。 background= myweb.gif
表格纸，与 bgcolor 不要同用。 bgcolor= #0000FF
表格底色，与 background 不要同用，请看例子六。 bordercolor= #FF00FF
表格边框颜色，NC 与 IE 有不同的效果，请看例子六。 bordercolorlight= #00FF00
表格边框向光部分的颜色，请看例子二。『只适用于 IE』 bordercolordark= #00FFFF
表格边框背光部分的颜色，请看例子二，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』 cols= 2
表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己。 TR 的参数设定（常用）：例如： tr align= RIGHT valign= MIDDLE bgcolor= #0000FF bordercolor= #FF00FF bordercolorlight= #808080 bordercolordark= #FF0000 align= RIGHT
该一列内字画等的摆放贴位置（水平），可选值为： left, center, right。 valign= MIDDLE
该一列内字画等的摆放贴位置（垂直），可选值为： top, middle, bottom。 bgcolor= #0000FF
该一列底色，请看例子五。 bordercolor= #FF00FF
该一列边框颜色，请看例子三。『只适用于 IE』 bordercolorlight= #808080
该一列边框向光部分的颜色，请看例子三。『只适用于 IE』 bordercolordark= #FF0000
该一列边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』 TD 的参数设定（常用）：例如： td width= 48% height= 400 colspan= 5 rowspan= 4 align= RIGHT valign= BOTTOM bgcolor= #FF00FF bordercolor= #808080 bordercolorlight= #FF0000 bordercolordark= #00FF00 background= myweb.gif width= 48%
该一储存格宽度，接受绝对值（如 80）及相对值（如 80%）。 height= 400
该一储存格高度。 colspan= 5
该一储存格向右打通的栏数。请看例子六 rowspan= 4
该一储存格向下打通的列数。请看例子六 align= RIGHT
该一储存格内字画等的摆放贴位置（水平），可选值为： left, center, right。 valign= BOTTOM
该一储存格内字画等的摆放贴位置（垂直），可选值为： top, middle, bottom。 bgcolor= #FF00FF
该一储存格底色，请看例子四。 bordercolor= #808080
该一储存格边框颜色，请看例子三。『只适用于 IE』 bordercolorlight= #FF0000
该一储存格边框向光部分的颜色，请看例子三。『只适用于 IE』 bordercolordark= #00FF00
该一储存格边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』 background= myweb.gif
该一储存格纸，与 bgcolor 任用其一。例子一： table width= 60% border= 1
tr td 只有一个储存格（cell）的表格 /td /tr
/table 显示结果只有一个储存格（cell）的表格例子二： table width= 60% border= 5 bordercolorlight= #FF00FF bordercolordark= #FF0000
tr td 第一列第一栏 /td td 第一列第二栏 /td /tr
/table 显示结果第一列第一栏第一列第二栏例子三： table width= 60% border= 1 cellspacing= 5
tr bordercolor= #0000FF td 第一列第一栏 /td td 第一列第二栏 /td
/tr
tr bordercolorlight= #FF00FF bordercolordark= #00FF00 td 第二列第一栏 /td td 第二列第二栏 /td
/tr
/table 显示结果第一列第一栏第一列第二栏第二列第一栏第二列第二栏例子四： table width= 60% border= 1 cellpadding= 10
tr td bgcolor= #FFCCE6 第一列第一栏 /td td bgcolor= #FFFFC6 第一列第二栏 /td
/tr
tr td bgcolor= #FFD9FF 第二列第一栏 /td td bgcolor= #DAB4B4 第二列第二栏 /td
/tr
/table 显示结果第一列第一栏第一列第二栏第二列第一栏第二列第二栏例子五：原始码 center
table width= 60% cellspacing= 0 cellpadding= 2 align= CENTER
tr td bgcolor= #FFD2E9 第一列第一栏 /td td bgcolor= #FFDAB5 第一列第二栏 /td td bgcolor= #FFFFB5 第一列第三栏 /td
/tr
tr bgcolor= #C0C0C0 td 第二列第一栏 /td td 第二列第二栏 /td td 第二列第三栏 /td
/tr
/table
/center 显示结果第一列第一栏第一列第二栏第一列第三栏第二列第一栏第二列第二栏第二列第三栏例子六原始码 center
table width= 350 border= 1 cellspacing= 0 cellpadding= 2 align= CENTER bgcolor= #FFC4E1 bordercolor= #0000FF
tr td 第一列第一栏 /td td colspan= 2 第一列之第二栏及第三栏 /td
/tr
tr td rowspan= 2 第二列及第三列之第一栏 /td td 第二列第二栏 /td td 第二列第三栏 /td
/tr
tr td 第三列第二栏 /td td 第三列第三栏 /td
/tr
/table
/center 显示结果第一列第一栏第一列之第二栏及第三栏第二列及第三列之第一栏第二列第二栏第二列第三栏第三列第二栏第三列第三栏■ TH ： TH 与 TD 同样是标示一个储存格，唯一不同的是 TH 所标示的储存格中的文字是以粗体出现，通常用于表格第一列以标示栏目。它的用法是取代 TD 的位置便可以，其参数设定请参考 TD 。
当然若为 TD 所标示的储存格中的文字加上粗体标记 B 便等如 TH 的效果。例子：原始码 center
table width= 350 border= 1 cellspacing= 0 cellpadding= 2 align= CENTER
tr align= CENTER th Month /th th % of IE visitor /th th % of NC visitor /th
/tr
tr align= CENTER td August /td td 61% /td td 39% /td
/tr
tr align= CENTER td July /td td 54% /td td 46% /td
/tr
tr align= CENTER td June /td td 52% /td td 48% /td
/tr
/table
/center 显示结果Month % of IE visitor % of NC visitor August 61% 39% July 54% 46% June 52% 48%■ CAPTION ： CAPTION 的作用是为表格标示一个标题列，有如在表格上方加上一没格线的打通列。当然亦可置于下方，通常用以存放该表格的标题。 CAPTION 的参数设定（常用）：
例如： caption align= TOP valign= TOP /caption align= TOP
该表格标题列相对于表格的摆放贴位置（水平），可选值为： left, center, right, top, middle, bottom，若 align= bottom 的话标题列便会出现对表格的下方，不管你的原始码中把 caption 放在 table 中的头部或尾部。 valign= TOP
该表格标题列相对于表格的摆放位置（上下），可选值为： top, bottom。和 align= TOP 或 align= BOTTOM 是一样的，虽然功能重复了，但如果你要标题列置于下方及向右或向左贴，那末两个参数便可一用了。当只一个参数时，请首选 align，因为 valign 是由 HTML 3.0 才开始的参数。例子： center
table width= 350 border= 1 cellspacing= 0 cellpadding= 2 align= CENTER
caption 网页速成八月份访客浏览器使用分析 /caption
tr align= CENTER th Month /th th % of IE visitor /th th % of NC visitor /th
/tr
tr align= CENTER td August /td td 61% /td td 39% /td
/tr
/table
/centerhtml教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：优化HTML的输入框提高用户体验和易用度的方法

下一篇：HTML5标记div、section、article使用说明