2、在test.html文件内,使用table标签创建一个表格,用于测试。
3、在test.html文件内,设置table标签的class属性为otwo。
4、在css标签内,通过class定义表格的外边框的颜色,例如,这里使用border属性设置外边框颜色为红色。
5、在css标签内,再通过class定义表格内边框的颜色,即td单元格的颜色,例如,这里设置为蓝色。
1、利用 height属性,这样是直接拉高 td 单元格的高度,缺点:文字不能对齐2、做为height属性文字垂直不对齐的补充,增加 line-height属性,与height相同时则垂直居中,但换行则会导致两行间距太大。
3、padding-top padding-bottom 可以增加上下边距,很好用的属性,在bootstrap框架中是通过这个属性实现表格样式的。就算多行,也是一样保持间距。
或者结合使用,选择一款适合的。
.table tr td { padding:10px 0} 这样设置省事。
CSS中宽度和高度分别可以通过width和height实现,那么对于单元格的宽度和高度,则可以通过如下样式来设置
td{ width:100px height:50px} /*设置单元格宽度100px,高度50px*/示例如下:
给出HTML元素
<table><tr><td>1</td><td>2</td><td>345</td></tr>
<tr><td>6789</td><td>10</td><td>11</td></tr>
</table>
设置单元格高度和宽度样式
table{border-collapse:collapse}td{
border: 1px solid green /*边框*/
width:100px /*单元格宽度*/
height:50px /*单元格高度*/
text-align:center /*单元格文字居中对齐*/
}
效果如下