表格边框
指定CSS表格边框，使用border属性。
下面的例子指定了一个表格的Th和TD元素的黑色边框：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><style>table,th,td {border: 1px solid black;}</style>
</head><body><table><tr><th>Firstname</th><th>Lastname</th></tr><tr><td>Peter</td><td>Griffin</td></tr><tr><td>Lois</td><td>Griffin</td></tr></table>
</body></html>
这个表格有双边框，是因为th和td有独立的边界
为了显示一个表的单个边框，使用border-collapse属性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><style>table {border-collapse: collapse;}table,td,th {border: 1px solid black;}</style>
</head><body><table><tr><th>Firstname</th><th>Lastname</th></tr><tr><td>Peter</td><td>Griffin</td></tr><tr><td>Lois</td><td>Griffin</td></tr></table><p><b>注意：</b> 如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。</p></body></html> 
表格宽度和高度
Width和height属性定义表格的宽度和高度。
下面的例子是设置100％的宽度，50像素的th元素的高度的表格：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><style>table,td,th {border: 1px solid black;}table {width: 100%;}th {height: 50px;}</style>
</head><body><table><tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr><tr><td>Peter</td><td>Griffin</td><td>$100</td></tr><tr><td>Lois</td><td>Griffin</td><td>$150</td></tr><tr><td>Joe</td><td>Swanson</td><td>$300</td></tr><tr><td>Cleveland</td><td>Brown</td><td>$250</td></tr></table>
</body></html>
表格文字对齐
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，向左，右，或中心：
垂直对齐：vertical-align： top， bottom center
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><style>table,td,th {border: 1px solid black;}td {height: 50px;vertical-align: bottom;}</style>
</head><body><table><tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr><tr><td>Peter</td><td>Griffin</td><td>$100</td></tr><tr><td>Lois</td><td>Griffin</td><td>$150</td></tr><tr><td>Joe</td><td>Swanson</td><td>$300</td></tr><tr><td>Cleveland</td><td>Brown</td><td>$250</td></tr></table>
</body></html>
