一、表格的创建
表格由<table>
开始,</table>
结束。除此之外还需要行元素<tr>
和单元格元素<td>
语法格式:
<table>
<tr>
<td>单元格内的文字</td>
……
</tr>
……
</table>
解释:
<table></table>
:用于定义一个表格<tr></tr>
:用于定义表格中的一行,必须嵌套在<table></table>
标记中,在<table></table>
中包含几对<tr></tr>
,就表示该表格有几行。<td></td>
:用于定义该表格中的单元格,必须嵌套在<tr></tr>
标记中,一对<tr></tr>
中包含几对<td></td>
,就表示该行中有多少列(或多少个单元格)
二、<table>
标记的属性
当表格只是作布局页面时,可以不在页面中显示出来,但是有时候根据页面需求需要将表格显示出来时,就需要设置表格的相关属性,使整个页面看起来美观。
<table>
标记常用属性:
属性名 | 含义 | 常用属性值 |
---|---|---|
border | 设置表格的边框(默认border=”0”无边框) | 像素值 |
cellspacing | 设置单元格与单元格之间的空白间距 | 像素值(默认为2像素) |
cellpadding | 设置单元格内容与单元格之间的空白间距 | 像素值(默认为1像素) |
width | 设置表格的宽度 | 像素值 |
height | 设置表格的高度 | 像素值 |
align | 设置表格在网页中的水平对齐方式 | left、center、right |
bgcolor | 设置表格的背景颜色 | 预定义的颜色值、十六进制#RGB、rgb(r,g,b) |
background | 设置表格的背景图像 | url地址 |
三、<tr>
标记属性
单独设置表格中的某一行特殊显示,需要为行标记定义属性
<tr>
标记常用属性:
属性名 | 含义 | 常用属性值 |
---|---|---|
height | 设置行高度 | 像素值 |
align | 设置一行内容的水平对齐方式 | left、center、right |
valign | 设置一行内容的垂直对齐方式 | top、middle、bottom |
bgcolor | 设置行背景颜色 | 预定义的颜色值、十六进制#RGB、rgb(r,g,b) |
background | 设置行背景图案 | url地址 |
注意:
<tr>
标记无宽度属性width,其宽度主要取决于表格标记<table>
- 可以对
<tr>
标记应用valign属性,用于设置一行内容的垂直对齐方式 - 虽然可以对
<tr>
标记应用background属性,但是在<tr>
标记中此属性兼容性问题严重
四、标记的属性
通过为单元格标记定义属性,可以单独对某一个单元格进行控制
<td>
标记的常用属性:
属性名 | 含义 | 常用属性值 |
---|---|---|
width | 设置单元格的宽度 | 像素值 |
height | 设置单元格的高度 | 像素值 |
align | 设置单元格内容的水平对齐方式 | left、center、right |
valign | 设置单元格内容的垂直对齐方式 | top、middle、bottom |
bgcolor | 设置单元格的背景颜色 | 预定义的颜色值、十六进制#RGB、rgb(r,g,b) |
background | 设置单元格的背景图案 | url地址 |
colspan | 设置单元格横跨的列数(用于合并水平方向的单元格) | 正整数 |
rowspan | 设置单元格竖跨的行数(用于合并垂直方向的单元格) | 正整数 |
五、标记及其属性
th是Table Heading的简写,意为表格标题(也称表格的表头)。
<th>
标记与<td>
标记的区别:
- 表头一般位于表格的第一行或第一列,且
<th>
标记控制的文本显示为粗体