【网页设计最新经典技术文档】HTML语言剖析表格标记

精品文档精心整理精品文档可编辑的精品文档HTML语言剖析（七）表格标记<TABLE><TR><TD><TH><CAPTION>■<TABLE><TR><TD>：▲Top这三个标记是定义表格的最重要的标记，可以说只学这三个己足够。<TABLE>是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的范围内才适用，属容器标记的还有其他。<TR>用以标示表格列（row）<TD>用以标示储存格（cell）<TABLE>的参数设定（常用）：例如：<tablewidth="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>的参数设定（常用）：例如：<tralign="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>的参数设定（常用）：例如：<tdwidth="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任用其一。例子一：原始码<tablewidth="60%"border="1"><tr><td>只有一个储存格（cell）的表格</td></tr></table>显示结果

只有一个储存格（cell）的表格例子二：原始码<tablewidth="60%"border="5"bordercolorlight="#FF00FF"bordercolordark="#FF0000"><tr><td>第一列第一栏</td><td>第一列第二栏</td></tr></table>显示结果

第一列第一栏第一列第二栏例子三：原始码<tablewidth="60%"border="1"cellspacing="5">

<trbordercolor="#0000FF"><td>第一列第一栏</td><td>第一列第二栏</td>

</tr>

<trbordercolorlight="#FF00FF"bordercolordark="#00FF00"><td>第二列第一栏</td><td>第二列第二栏</td>

</tr></table>显示结果

第一列第一栏第一列第二栏第二列第一栏第二列第二栏例子四：原始码<tablewidth="60%"border="1"cellpadding="10">

<tr><tdbgcolor="#FFCCE6">第一列第一栏</td><tdbgcolor="#FFFFC6">第一列第二栏</td>

</tr>

<tr><tdbgcolor="#FFD9FF">第二列第一栏</td><tdbgcolor="#DAB4B4">第二列第二栏</td>

</tr></table>显示结果

第一列第一栏第一列第二栏第二列第一栏第二列第二栏例子五：原始码<center><tablewidth="60%"cellspacing="0"cellpadding="2"align="CENTER">

<tr><tdbgcolor="#FFD2E9">第一列第一栏</td><tdbgcolor="#FFDAB5">第一列第二栏</td><tdbgcolor="#FFFFB5">第一列第三栏</td>

</tr>

<trbgcolor="#C0C0C0"><td>第二列第一栏</td><td>第二列第二栏</td><td>第二列第三栏</td>

</tr></table></center>显示结果第一列第一栏第一列第二栏第一列第三栏第二列第一栏第二列第二栏第二列第三栏例子六原始码<center><tablewidth="350"border="1"cellspacing="0"cellpadding="2"align="CENTER"bgcolor="#FFC4E1"bordercolor="#0000FF">

<tr><td>第一列第一栏</td><tdcolspan="2">第一列之第二栏及第三栏</td>

</tr>

<tr><tdrowspan="2">第二列及第三列之第一栏</td><td>第二列第二栏</td><td>第二列第三栏</td>

</tr>

<tr><td>第三列第二栏</td><td>第三列第三栏</td>

</tr></table></center>显示结果第一列第一栏第一列之第二栏及第三栏第二列及第三列之第一栏第二列第二栏第二列第三栏第三列第二栏第三列第三栏■<TH>：▲Top<TH>与<TD>同样是标示一个储存格，唯一不同的是<TH>所标示的储存格中的文字是以粗体出现，通常用于表格第一列以标示栏目。它的用法是取代<TD>的位置便可以，其参数设定请参考<TD>。当然若为<TD>所标示的储存格中的文字加上粗体标记<B>便等如<TH>的效果。例子：原始码<center><tablewidth="350"border="1"cellspacing="0"cellpadding="2"align="CENTER">

<tralign="CENTER"><th>Month</th><th>%ofIEvisitor</th><th>%ofNCvisitor</th>

</tr>

<tralign="CENTER"><td>August</td><td>61%</td><td>39%</td>

</tr>

<tralign="CENTER"><td>July</td><td>54%</td><td>46%</td>

</tr>

<tralign="CENTER"><td>June</td><td>52%</td><td>48%</td>

</tr></table></center>显示结果Month%ofIEvisitor%ofNCvisitorAugust61%39%July54%46%June52%48%■<CAPTION>：▲Top<CAPTION>的作用是为表格标示一个标题列，有如在表格上方加上一没格线的打通列。当然亦可置于下方，通常用以存放该表格的标题。<CAPTION>的参数设定（常用）：例如：<captionalign="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是由HTML3.0才开始的参数。例子：原始码<center><tablewidth="350"border="1"cellspacing="0"cellpadding="2"align="CENTER"><caption>网页速成八月份访客浏览器使用