有时候我们在css 进行表格对齐样式进行设置，那么我们怎么来设置它呢？这一节我们来学习表格的对齐方式。
实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table,th,td{border:1px solid black;}
th,td{
width:80px;height:30px;
padding:5px;
text-align:center;
}
td.left{text-align:left;}
td.center{text-align:center;}
td.right{text-align:right;}
td.text_top{vertical-align:text-top;}
td.middle{vertical-align:middle;}
td.bottom{vertical-align:bottom;}
tr.tdred{color:red;}
</style>
</head>
<body>
<h1>表格的对齐方式实例</h1>
<table>
<tr>
<th>对齐方式</th>
<td>左对齐</td>
<td>居中对齐</td>
<td>右对齐</td>
<td>上对齐</td>
<td>垂直对齐</td>
<td>下对齐</td>
</tr>
<tr class="tdred">
<th>值</th>
<td class="left">left</td>
<td class="center">center</td>
<td class="right">right</td>
<td class="text_top">text-top</td>
<td class="middle">middle</td>
<td class="bottom">bottom</td>
</tr>
</table>
</body>
</html>
运行效果：
评论