HTML之 表格table
首先介绍 table 的基本结构:
-
< table>
-
< caption>表格标题< /caption>
标题会自动居中在表格内容正上方 -
< tr>
< th> 表头列< /th>
< th> 表头列< /th>
表头列内容会自动加粗和居中
……
< /tr>< tr>
< td> 普通列< /td>
< td> 普通列< /td>
……
< /tr>
< /table>
table 基本标签的属性:
<table:
-
border=" *px"
是table的自带属性,设置了border,相当于设置了,fram="box"和rules=“all”
若在css中设置 border:2px solid black ; 效果只是相当于设置外边框 fram=“box” -
bordercolor
-
bordercolorlight (亮边颜色)
-
bordercolordark (暗边颜色)
-
bgcolor
-
background=“url”
-
width
-
height
-
cellspancing=" *px" (格与格之间的边距)
-
cellpadding =" *px"(字与格之间的边距)
-
align
-
frame(外边框的设置)
box或border: 显示上下左右边框
above:显示上边框
below:下
lhs:左
rhs:右
hsides:上下
vsides:左右
void:不显示 -
rules(内边框的设置)
all:显示所有
rows:仅显示行边框
cols:仅显示列边框
none:不显示
<tr:(有自身的对齐方式)
- align
- valign=“top | middle | bottom” (竖直对齐方式)
- bgcolor
- bordercolor
- bordercolorlight
- bordercolordark
<td |< th(合并行和列)
在 tr 拥有的属性基础上 新增加了
- colspan=" n " (合并列)
- rowspan=" n " (合并行)
- width
- height
- background=“URL”
使用中遇到的问题:
1、当设置了rules时cellspacing失效
没设置rules时
<table width="250px" height="250px" border="5px" cellspacing="10px" >
<caption>阿顺</caption>
<tr >
<th rowspan="2">.</th>
<th>阿</th>
<th colspan="3">顺特烦</th>
<th>恼</th>
<th rowspan="2">.</th>
</tr>
<tr>
<td>阿</td>
<td>顺</td>
<td>特</td>
<td>烦</td>
<td>恼</td>
</tr>
</table>
设置rules以后
<table width="250px" height="250px" border="5px" cellspacing="10px" rules="all">
2、CSS中若设置了 padding:0px;则cellpadding失效
没设置padding时
<table width="250px" height="250px" border="5px" cellspacing="10px" cellpadding="20px">
设置css以后
<style>
*{
padding: 0px;
margin: 0px;
}
</style>
<table width="250px" height="250px" border="5px" cellspacing="10px" cellpadding="20px">
阿顺特烦恼(peace!)
上一篇: 接入京东云