Bootstrap 表格

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在 &lt;tbody&gt; 内添加斑马线形式的条纹 ( IE8 不支持)</p>

<p>.table-bordered为所有表格的单元格添加边框</p>

<p>.table-hover在&lt; tbody &gt; 内的任一行启用鼠标悬停状态</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>