首页 > 技术文章 > HTML-Table

-hjj 2018-11-11 19:28 原文

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
	<style>
		body{
			font-size:12px;
		}

		a{
			color:#005aa0;
			text-decoration:none;
		}
		a:hover{
			text-decoration:underline;
		}

		#tbl{
			width:990px;
			border-bottom:1px solid #ddd;
		}

		#tbl thead td{
			/*文本颜色,加粗,下边框,文本水平居中对齐*/
			color:#666;
			font-weight:bold;
			border-bottom:1px solid #ddd;
			text-align:center;
			/*增加上下内边距*/
			padding:5px 0;
		}

		#tbl .col1{
			width:610px;
			text-align:left;
		}

		#tbl tbody td{
			/*文本水平居中对齐,下边框,上下内边距*/
			text-align:center;
			border-bottom:1px dotted #ddd;
			padding:5px 0;
		}
	</style>
 </head>
 <body>
  <table id="tbl">
		<thead>
			<tr>
				<td class="col1">主题</td>
				<td>回复/浏览</td>
				<td>作者</td>
				<td>时间</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="col1">
					<a href="#">银灰色的,很酷</a>
				</td>
				<td>0/0</td>
				<td>
					<a href="#">2001年冬天</a>
				</td>
				<td>
					2011-11-11 11:11:11
				</td>
			</tr>
			<tr>
				<td class="col1">
					<a href="#">银灰色的,很酷</a>
				</td>
				<td>0/0</td>
				<td>
					<a href="#">2001年冬天</a>
				</td>
				<td>
					2011-11-11 11:11:11
				</td>
			</tr>
			<tr>
				<td class="col1">
					<a href="#">银灰色的,很酷</a>
				</td>
				<td>0/0</td>
				<td>
					<a href="#">2001年冬天</a>
				</td>
				<td>
					2011-11-11 11:11:11
				</td>
			</tr>
			<tr>
				<td class="col1">
					<a href="#">银灰色的,很酷</a>
				</td>
				<td>0/0</td>
				<td>
					<a href="#">2001年冬天</a>
				</td>
				<td>
					2011-11-11 11:11:11
				</td>
			</tr>

		</tbody>
	</table>
 </body>
</html>

推荐阅读