HTML中表格
HTML表格
【表格table】
表格用table表示,表格中的每一行tr表示,一行中的每一列用td表示
th表示的是:表头。表头中的文字,默认为加粗居中。th要放在tr中,用于替换掉td。
【table的常用属性】
1、border:给表格加边框。 默认给所有td加边框,并且给整个table加外边框。 当增大border的值时,td上的边框不变化,只有最外层大边框变宽。
2、cellspacing:单元格与单元格之间的距离。
cellspacing="0" 表示单元格与单元格之间没有距离,但是边框线的宽度依然是两条线的宽度。
[注意] 表格边框合并的CSS写法:
style="border-collapse: collapse;"
这条CSS与cellspacing="0"有什么区别?
cellspacing="0"仅仅是将单元格之间的距离调整为0,实际上单元格之间依然还是两条线;
border-collapse: collapse; 是将表格相邻的两条边框进行合并处理,只有一条线存在。(一旦边框合并,cellspace属性将会失效。)
3、cellpadding:单元格中的文字与单元格边框的距离
4、 height:表格的高度
width:表格的宽度
使用表格宽、高属性设置大小:
<table height="400" width="500"></table>
使用CSS样式设置大小:
<table style="height:400px; width:500px;"></table>
5、align:设置表格在浏览器中的位置。不建议使用了。
可选值:left 表格居左 /center 表格居中/right 表格居右
6、bgcolor:背景色
bordercolor:边框颜色
background:背景图
background="img/computer.jpg"
背景色和背景图同时存在时,背景图会覆盖背景色
【tr与td常用属性】
1、width:单元格宽度
height:单元格的高度
2、bgcolor: 单元格的颜色
3、align:设置单元格中的文字,水平对齐方式。
left、center、right
valign:设置单元格中的文字,垂直对齐方式。
top、middle、bottom
4、 nowrap="nowrap" 当单元格文字过多时,设置单元格文字不断行显示。 但是,会把表格的宽度撑大!!!
【表格的跨行与跨列】
1、跨列:在td上使用属性colspan="n"进行跨列。如果一个单元格跨n列,则,单元格右边的n-1个单元格需要去掉。
2、跨行:在td上使用属性rowspan="n"进行跨行。如果一个单元格跨n行,则,单元格下边的n-1个单元格需要去掉。
<body>
<table border="1" cellspacing="0" style="border-collapse: collapse;" cellpadding="10" width="500" height="400" bgcolor="#FFA100">
<tr>
<th width="300" rowspan="3">1-1</th>
<th colspan="3">1-2</th>
</tr>
<tr>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>