Bootstrap响应式网站开发任务式教程课件 任务5 使用Bootstrap表格

任务5使用Bootstrap表格Bootstrap响应式网站开发网页中的表格1

表格是HTML中最常见的元素之一，在使用DIV+CSS进行网页的排版之前，表格布局法一直是网页进行整体结构规划的主要方法。而目前，表格布局法已经逐步被HTML+CSS取代，所以现在网页中的表格就仅以列表的形式出现，如图5-1所示。Bootstrap表格--网页中的表格表格的简介图

网页中表格的使用

简单的HTML表格由table元素以及一个或多个tr、th或td元素组成，其中tr元素定义表格行，th元素定义表头，td元素定义表格单元。除此之外，HTML表格也包括caption、thead、tbody以及tfoot等元素。掌握了这些元素的基本定义，就可以借助Bootstrap高效快速的在网页中创建了一个清晰的表格。Bootstrap表格--网页中的表格表格的基本元素表5-1表格标签标签描述<table>…</table>表格的基础样式，用于定义一个表格的开始和结束<thead>…</thead>表格标题行的容器元素，用来标识表格列<tbody>…</tbody>表格主体中的表格行的容器元素<tr>…</tr>用于定义表格的一行，一组行标签内可以建立多组由<td>或<th>标签所定义单元格<th>…</th>用于定义表格的表头，一组<th>标签将建立一个表头，特殊的表格单元格，用来标识列或行，必须在<thead>或<tr>标签内使用。<td>…</td>用于定义表格的最基础元素--单元格，一组<td>标签将建立一个单元格，<td>标签必须放在<tr>标签内<caption>…</caption>关于表格存储内容的描述或总结<tfoot>…</tfoot><tfoot>标签表示HTML表格的页脚，该标签用于组合HTML表格中的表注内容右侧的表列出了Bootstrap支持的表格元素：

使用HBuilder编辑器，在HBuilder中新建一个Web项目，编写表格代码如左下。Bootstrap表格--网页中的表格创建表格<tablewidth="400"border="1"cellspacing="10"cellpadding="5"><tr> <td>日期</td> <td>项目</td> <td>获奖者</td></tr><tr> <td>2022/2/14</td> <td>自由式滑雪女子空中技巧</td> <td>徐梦桃</td></tr></table>演示Bootstrap中的表格1Bootstrap表格--Bootstrap中表格的简介基本型表格演示<tableclass="table">Bootstrap表格--Bootstrap中表格的简介条纹状表格演示<tableclass="tabletable-striped">Bootstrap表格--Bootstrap中表格的简介带边框表格演示<tableclass="tabletable-bordered">Bootstrap表格--Bootstrap中表格的简介鼠标悬停表格演示<tableclass="tabletable-hover">Bootstrap表格--Bootstrap中表格的简介响应式表格演示<divclass="table-responsive">Bootstrap表格应用表格的状态类与颜色类演示类名描述对应颜色.table-active对某一特定的行或单元格应用悬停颜色灰色（#e5e5e5）.table-success表示一个成功的或允许的动作绿色（#bcd0c7）.table-warning表示一个需要注意的警告橘色（#e6dbb9）.table-danger表示一个危险的或潜在的负面动作红色（#dfc2c4）.table-primary表示这是一个重要的操作蓝色（#cfe2ff）.table-info表示内容已变动浅蓝色（#cff4fc）.table-secondary表示内容不怎么重要灰色（#e2e3e5）.table-light可以是表格行的背景浅灰色（#f8f9fa）.table-dark可以是表格行的背景深灰色（#212529）综合案例：“圆梦助学”助学金评选结果展示4

Bootstrap案例案例展示本例主要展示“圆梦助学”助学金评选结果，效果