Bootstrap提供了一个清晰的创建表格的布局
<table>标签：为表格添加基础的样式。
<thead>标签：表格标题行的容器元素(<tr>),用来标识表格列。
<tbody>标签：表格主题中的表格行的容器元素(<tr>)。
<tfood>标签：表格底部中的表格行的容器元素(<tr>)。
<tr>标签 ：一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。
<td>标签：默认的表格单元格。
<th>标签：特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
<caption>标签：关于表格存储内容的描述或总结。
实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：表格</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h2>表格类</h2>
<p>.table只为表格添加基本样式，(只有横向分隔线):</p>
<p>.table-striped在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)</p>
<p>.table-bordered为所有表格的单元格添加边框</p>
<p>.table-hover在< tbody > 内的任一行启用鼠标悬停状态</p>
<p>.table-condensed让表格更加紧凑</p>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead >
<tr>
<th>序号</th><th>课程</th>
</tr>
</thead>
<tbody >
<tr>
<td>1</td>
<td>HTML5</td>
</tr>
<tr>
<td>2</td>
<td>CSS3</td>
</tr>
<tr>
<td>3</td>
<td>JavaScript</td>
</tr>
<tr>
<td>4</td>
<td>jQuery</td>
</tr>
<tr>
<td>5</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>6</td>
<td>Aanglur JS</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</div>
<script src="Css/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
原文：http://www.cnblogs.com/melao2006/p/4986632.html