p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Hannotate SC" }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Hannotate SC"; min-height: 17.0px }
span.s1 { }
HTML 表格<table>的使用
表格用table表示 表格中每一行用tr 一行中的每一列用td表示
例如一个三行两列的表格:
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
th 表示的是表头 表头中的文字默认为加粗居中 th要放在tr中用于替换td,例如:
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
table 的常用属性
1.border属性
给表格加边框 默认给所有的td加边框 并且给整个table加外边框 当增大border的值的时候 td 的边框不变 只有最外的变宽
<table border="10"></table>
2.cellspacing属性
表示的是单元格与单元格之间的距离 注意cellspacing=“0” 单元格与单元格之间没有距离 但是边框线的宽度依然是两条线的宽度
表格边框合并的 css 写法 :style="border-collapse: collapse;
这条css 与cellspacing有什么区别?
cellspacing=“0”仅仅是将单元格之间的距离调整为0,但是单元格之间还是两条线
而style="border-collapse: collapse; 是将表格相邻的两条边框合并处理,只有一条线存在。一旦边框合并 cellspacing属性将会失效
3.cellpadding属性 单元格边框与单元格中的文字的距离
4.height:表格的高度 width:表格的宽度
<table height="100px" width="100px"></table>
<table style="height: 100px;width: 100px;"></table>(CSS写法)
5.align属性
设置表格整体在浏览器的位置,已经被淘汰了,不建议使用。
可选值:left center right
6.bgcolor 背景色
bgcolor="red"
7.bordercolor 边框颜色
bordercolor="blue"
8.background 背景图 背景色和背景图同时存在时 背景图会覆盖背景色
background="img/computer.jpg"
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Hannotate SC" }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Hannotate SC"; min-height: 17.0px }
span.s1 { }
<tr>与<td>常用属性
1.
width:单元格宽度
height:单元格高度
当你改变了一行或者
2.bgcolor属性 单元格的背景颜色
<table bgcolor="aqua">
<tr bgcolor="blue">
<td bgcolor="black"></td>
</tr>
</table>
最里面的覆盖外面的
3. align属性 设置单元格中文字水平对其方式,默认局左
可选值:left center right
4.valign属性 设置单元格中文字垂直对其方式,默认局中
可选值:top middle(center) bottom 上 中 下
5.nowrap属性 nowrap="nowrap"
当单元格文字过多时,设置单元行文字不断行显示,但是会把表格的宽度撑大
表格的跨行与跨列
1.跨列:在td上使用属性colspan="n"进行跨列。如果一个单元个跨n列,则单元格右边的n-1个单元格要去掉。
2.跨行:在td上使用属性rowspan="n"进行跨行。 如果一个单元个跨n行,则单元格下边的n-1个单元格要去掉。