1基础知识
1.1表格标记
1.table代表表格,tr表示一行,td表示一个单元格
<table border="" cellspacing="" cellpadding="">
<tr><td>Data</td></tr>
<tr><td>Data</td></tr>
</table>
1.2表格表头、表格标题
1 <th></th>表示表头,可以看成特殊的<td></td>,用于表示一个单元格,但其有给字体加粗的效果
<table border="" cellspacing="" cellpadding="">
<tr><th>Data</th></tr>
<tr><td>Data</td></tr>
</table>
2 标题caption
<table border="" cellspacing="" cellpadding="">
<caption>我是表格的标题</caption>
<tr><th>Data</th></tr>
<tr><td>Data</td></tr>
</table>
2表格美化
2.1单元格间隙重叠
1border-collapse
<style>
table{
font-size: 10px;
border-collapse: collapse;
}
</style>
<table border="" cellspacing="" cellpadding="">
<tr><th>Data</th></tr>
<tr><td>Data</td></tr>
</table>
2.2表格边框
1如何为表格设置边框
利用table标签里的border属性,为border属性设置属性值,此在结构中设置
<table border="2" cellspacing="" cellpadding="">
<tr><th>Data</th></tr>
<tr><td>Data</td></tr>
</table>
2利用css样式综合为边框进行设置
例如border-color设置表格边框、border-bottom-radius设置单元格下发角度等等,可以举一反三设置单元格上、下、左、右。单元格同样进行设置,只不过要用后代选择器以及别的选择器,精准选择到所要设置的<td>
CSS样式
table{
font-size: 10px;
/*border-collapse: collapse;*/
border-radius: 5px;
border-color: green;
}
结构
<table border="2" cellspacing="" cellpadding="">
<tr><th>Data</th></tr>
<tr><td>Data</td></tr>
</table>
版权声明:本文为qq_67896626原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。