您的位置：首页 > 其它

表格的基本特性

2014-03-30 18:30 274 查看
<style>

th,td{padding:0;}

table{border-collapse:collapse;margin:0 auto;}/*去掉表格单元格的间距*/

/* table css reset */

th,td{border:1px solid black; height:50px; width:100px;}

table{width:500px;text-align: center;}

/*

注意事项：

1、不要给table,th,td以外的表格标签加样式，否则会出现问题的；

2、单元格默认是平分table的总宽度；

3、th里面的内容默认加粗并且左右上下居中显示

4、td里面的内容默认上下居中左右居左显示

5、table决定了整个表格的宽度；

6、table里面的单元格宽度都会被转换成百分比；

7、表格里面的每一列必须要有宽度；

8、表格里面的同一列继承最大宽度；

9、表格里面的同一行继承最大高度；

10、table 的标签基本特性是: display:table;

*/

</style>

<body>

<table><!-- 表格 -->

<tbody><!-- 表格主体 -->

<tr><!-- 行 -->

<th>表格标题</th>

<th>表格标题</th>

<th>表格标题</th>

<th>表格标题</th>

<th>表格标题</th>

</tr>

</tbody>

</table>

</body>

单元格合并：

合并列：colspan="2" 要把被合并的列去掉，合并行：rowspan="3"把要被合并的行去掉。

<table><!-- 表格 -->

<tbody>

<tr>

<td>单元格</td>

<td>单元格</td>

<td colspan="2" rowspan="3">单元格</td>

</tr>

<tr>

<td>单元格</td>

<td>单元格</td>

<td>单元格</td>

</tr>

<tr>

<td>单元格</td>

<td>单元格</td>

<td>单元格</td>

</tr>

</tbody>

</table>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航