/> rel="Edit-Time-Data" href="file:///C:/Documents and Settings/Administrator/Application Data/EIOffice/eiohtml/clip_editdata.mso" /> rel="OLE-Object-Data" href="file:///C:/Documents and Settings/Administrator/Application Data/EIOffice/eiohtml/clip_oledata.mso" />
网页中，无论排列数据还是对文本进行排版，表格都出了强大的功能。它以简洁明了和高效快捷的方式，将数据、文本、图像、表单等元素有序地显示在页面上。合理利用表格来排列数据，有助于协调页面结构的均衡。
１、创建表格：一个表格通常由行、列和单元格组成，每行由一个或多个单元格组成。
１）表格的基本构成table、tr、td：表格由行、列和单元格3部分组成，一般通过3个标记来创建，分别是表格标记table、行标记tr和单元格标记td。
语法： <table>
<tr><td>单元格中的文字</td><td>单元格中的文字</td></tr>
<tr><td>单元格中的文字</td><td>单元格中的文字</td></tr>
</table>
说明：<table>和</table>分别标记表示表格的开始和结束；<tr>和</tr>分别表示行的开始和结束，即有几组<tr></tr>就表示该表格为几行；<td>和</td>表示单元格的起始和结束。
２）设置表格的标题caption：通过<caption>来设置标题，一个<table>一般只应含有一个<caption>标记用于定义表格标题，一般放在<table>后，第一个<tr>前。（标题有居中效果）
３）表格的表头th：全称table head，是<td>单元格的一种变体，实质下仍是一种单元格，用来放置表头信息。一般情况下，浏览器会以粗体和居中的样式显示<th>标记中的内容。
２、设置表格基本属性：为了使表格更加美观、醒目，需要对表格的属性进行设置。
１）设置表格宽度width：如果不指定表格宽度，浏览器就会根据表格内容的多少自动调整宽度。
语法：<table width=”表格宽度”>
说明：宽度的值可以是像素，也可为百分比，如不指定，则默认宽度自适应。
２）设置表格高度height
说明：同宽度一样，高度的值可以是像素，也可为百分比。
注：定义表格宽度和高度的单位可以是像素或百分比，如是百分比则分为两种情况：如不是嵌套表格，那么百分比是相对浏览器窗口而言；如是嵌套表格，则百分比是相对于嵌套表格所在的单元格宽度而言。
３）设置表格对齐方式align：用于设置整个表格在页面中的对齐方式。
语法：<table align=”对齐方式”>
align参数取值
| 属性值 | 说明 |
| left | 默认值，整个表格在页面中左对齐 |
| center | 整个表格在页面中居中对齐 |
| right | 整个表格在页面中右对齐 |
注：整个表格的对齐方式，不影响表格内每一行自身的对齐方式。
３、设置表格的边框
１）表格边框宽度border：用于设置边框宽度。默认情况下，表格是不显示边框的。
语法：<table border=”边框宽度”>
说明：border标记设置的边框只影响表格四周的边框宽度，并不影响单元格之间的边框尺寸。（一般设置不超过5像素，过于宽大会影响整体美观）
注：虽不影响单元格的宽度，但使单元格的边框也显示出来了。
２）表格边框颜色bordercolor：默认情况下边框的颜色是灰色的（opera下如body设置了文本颜色，边框颜色也被设置；但用bordercolor好像不起作用。ie与firefox正常），可以用它设置边框颜色。但设置边框颜色的前提是边框的宽度不能为0，否则无法显示出边框的颜色。（ie中单元格边框颜色受影响，firefox中不受影响）
３）内框宽度cellspacing：用于设置表格内部每个单元格之间的间距。
语法：<table cellspacing=”内框宽度值”>
说明：内框宽度的单位是像素。（为0时，即没有间距。默认值为2的样子）
４）表格内文字与边框间距cellpadding：用于设置单元格边框与单元格里的内容之间的距离。
语法：<table cellpadding=”文字与边框间距值”>
说明：以像素为单位，一般可以根据需要设置，但不宜过大。
４、设置表格背景
１）设置表格背景颜色bgcolor
语法：<table bgcolor=”背景颜色”>
说明：bgcolor是针对整个表格的，不过被行、列或单元格定义的背景颜色所覆盖。
２）设置表格的背景图像background
语法：<table background=”背景图像路径”>
说明：路径可为相对路径、也可为绝对路径。（background在bgcolor之上）
５、设置表格的行属性：除了使用<table>标记的一些属性从整体上设置表格样式外，还可以 利用<tr>标记属性逐行设置表格的各种样式。
１）高度的控制height：在网页中经常遇到某一行高度和其他行不同的情况，这就需要使用height标记。但只对设置的这一行有效。
语法：<tr height=”行的高度”>
注：好像在原有的宽度内调整，如超过了的话就自动扩大。但最小是字的高度。
２）边框颜色bordercolor（firefox、opera好像不能设置的样子）
３）行背景bgcolor、background：与设置行的边框颜色相同，行的背景色可以单独设置。
说明：默认为透明色，即和文档背景颜色相同。基本同表格的设置一样。
４）行文字的水平对齐方式align
说明：水平对齐方式包括left、center和right。（center和middle一样效果，大概相同的）
５）行文字的垂直对齐方式valign
说明：垂直对齐方式包括top、middle和bottom。（middle是默认的）
注：middle和center可以交替使用的样子，但我想middle是垂直方式中的，而center是水平方式而言的吧。
６、调整单元格属性：单元格是表格中最基本的单位。<td>单元格全部包含在行<tr>中，一个行里面可以有任意多个单元格，可以自定义设置这些单元格的各项属性，而这些样式将覆盖<table>和<tr>已经定义的样式。
１）单元格大小width、height：默认情况下，单元格的宽度和高度会根据内容自动调整，也可以通过width和height调整单元格的宽度和高度。（单位是像素）
语法：<td width=”单元格宽度” height=”单元格高度”>
注：一行中的最大高度的单元格决定了该行是高度，且高度大小不受表格和表行高度的限制（即可比原来大，也可比原来小）。但宽度的大小受表格整体宽度的限制。
２）水平跨度colspan：使单元格跨多个列。
语法：<td colspan=”跨的列数”>
说明：跨的列数是这个单元格所跨列的个数，即单元格向右打通的单元格个数。
３）垂直跨度rowspan：垂直方向跨行。即单元格在垂直方向上跨行的个数。
４）对齐方式align、valign：单元格的对齐方式设置与行的对齐方式设置方法相似。
语法：<td align=”水平对齐方式” valign=”垂直对齐方式”>
５）设置单元格的背景色：可为单元格设置不同的背景颜色。
语法：<td bgcolor=”背景颜色”>
６）设置单元格的边框颜色bordercolor（firefox、opera好像不能设置的样子）
７）设置单元格的亮边框bordercolorlight：用于设置单元格亮边框的颜色，即单元格边框向光的部分。（好像指边框的右和下边框）（firefox、opera好像不能设置的样子）
８）设置单元格的暗边框bordercolordark：用于设置单元格暗边框的颜色，即单元格边框背光的部分。（好像指边框的左和上边框）（firefox、opera好像不能设置的样子）
９）设置单元格的背景图像background：同表格和行的设置一样。
７、表格的结构
１）表格的表首标记<thead>：用于定义表格最上端表首的样式，可以设置背景颜色、文字对齐方式、文字的垂直对齐方式等属性。
语法：<thead bgcolor=”背景颜色” align=”对齐方式” valign=”垂直对齐方式”>……</thead>
说明：bgcolor、align、valign的取值范围与单元格中的设置方法相同。在<thead>标记内还可以包含<td>、<th>和<tr>标记，而一个表元素中只能有一个<thead>标记。
２）表格的表主体标记<tbody>：用来统一设计表主体部分的样式
语法：<tbody bgcolor=”背景颜色” align=”对齐方式” valign=”垂直对齐方式”>……</tbody>
说明：bgcolor、align、valign的取值范围与<thead>标记中的相同。一个表元素中只能有一个<tbody>标记。
３）表格的表尾标记<tfoot>：用于定义表尾样式。
语法：<tfoot bgcolor=”背景颜色” align=”对齐方式” valign=”垂直对齐方式”>……</tfoot>
说明：bgcolor、align、valign的取值范围与<thead>标记中的相同。一个表元素中只能有一个<tfoot>标记。
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
