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>

posted @ 2015-11-22 20:23  melao2006  阅读(152)  评论(0编辑  收藏  举报