创建表格
表格的基本构成:table、tr、td
表格是用于排列内容的最佳手段,在HTML页面中,绝大多数页面都是使用表格进行排版的。
其中表格标记<table>...</table>,表格的其他各种属性都要在表格的开始标记<table>和表格的结束标记</table>之间才有效。
表格标记 标记 描述 <table>...</table> 表格标记 <tr>...</tr> 行标记 <td>...</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>表格的标题</caption>
表格的表头:th
表格中还有一种特殊的单元格,称为表头。一般位于表格的第一行,用来表明该列的内容类别,用<th></th>标记来表示。与<td>标记的使用方法相同,但是<th>标记中的内容是加粗显示的。
设置表格基本属性
表格的宽度:width
默认情况下,表格的宽度是根据内容自动调整的,用户也可以手动设置表格的宽度。
<table width="表格宽度">
表格宽度的值可以是具体的像素数,也可以设置为浏览器的百分比数。
表格的高度:height
<table height="表格高度">
表格的对齐方式:align
<table align="表格对齐方式">
align参数可以取值为left,center,right。
设置表格的边框
表格边框的宽度:border
默认情况下,表格是不显示边框的。为了使表格更加清晰,可以使用border参数设置边框的宽度。
<table border="边框宽度">
单位为像素。
表格边框的颜色:bordercolor
默认是灰色的。设置边框颜色的前提是border不为0。
<table border="边框宽度" bordercolor=“边框颜色”>
表格内框的宽度:cellspacing
是指表格内部各个单元格之间的宽度。
<table cellspacing="内框宽度">
表格内文字与边框的间距:cellpadding
默认情况下,表格内的文字会紧贴着表格的边框,这样看上去非常拥挤。可以使用cellpadding参数来调整。
<table cellpadding="文字与边框的距离">
设置表格背景
表格背景的颜色:bgcolor
<table bgcolor="颜色代码">
表格的背景图像:background
<table background="背景图像的地址">
设置表格的行属性
高度的控制:height
在网页中常常遇到一些表格中某一行高度和其他行不同的情况,这就需要使用height参数进行相应设置。
<tr height="表格中某行高度">
这一参数只对设置的这一行有效。
行的边框颜色:bordercolor
单独设置某行颜色
<tr bordercolor="颜色代码">
行的背景颜色:bgcolor
<tr bgcolor="颜色代码">
行文字的水平对齐方式:align
为某一行单独设置特殊水平对齐方式。
<tr align="水平对齐方式">
3种,left,center,right。
行文字的垂直对齐方式:valign
为某一行单独设置特殊垂直对齐方式。
<tr valign="水平对齐方式">
3种,top,middle,bottom。
表格标题的垂直对齐方式:align
<caption align="垂直对齐方式">表格的标题</caption>
垂直对齐方式的值可以取top或bottom。取值为top,是将标题文字设置在表格的上方;取值为bottom,是将标题文字设置在表格下方。
调整单元格属性
单元格大小:width、height
<td width="单元格宽度" height="单元格高度">
单元格水平跨度:colspan
是指在复杂的表格结构中,有些单元格是跨多个列的。
<td colspan=“跨的列数”>
单元格垂直跨度:rowspan
<td rowspan=“跨的行数”>
单元格对齐方式:align、align
设置单元格的对齐方式与设置行的对齐方式方法相似。
<td align=“水平对齐方式” valign=“垂直对齐方式”>
单元格的背景色:bgcolor
单元格的边框颜色:bordercolor
单元格的亮边框:bordercolorlight
单元格的暗边框:bordercolordark
单元格的背景图像:background
表格的结构
表格的表头标记:thead
表头样式的开始标记是<thead>,结束标记是</thead>,其中可以设置背景颜色、文字的水平对齐方式、文字的垂直对齐方式等。
<thead bgcolor="颜色代码" align="水平对齐方式" valign="垂直对齐方式">
......
</thead>
说明:在<thrad>标记内还可以包含<td>、<th>和<tr>标记,而一个表元素只能有一个<thead>
表格的表主体标记:tbody
与表头样式的标记功能类似,表主题样式用来统一设计表主体部分的样式,标记为<tbody>。
<tbody bgcolor="颜色代码" align="水平对齐方式" valign="垂直对齐方式">
......
</tbody>
说明:一个表元素中只能有一个<tbody>标记。
表格的表尾标记:tfoot
<tfoot>标记用于自定义表尾样式。
<tfoot bgcolor="颜色代码" align="水平对齐方式" valign="垂直对齐方式">
说明:一个表元素中只能有一个<tfoot>标记。
表格的嵌套