# 一、实验目标
写一个表格。页面如下:
# 二、环境依赖
采用bootstrap框架来实现,依赖的版本为3.3.7。
我们可以直接引用cdn的资源,资源地址如下:
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
**环境准备**
平台已经提供了实验的html、css文件。
# 三、实验知识
bootstrap提供了多种表格样式:
- 基本表格 (class="table")
- 条纹装表格 (class="table table-striped")
- 带边框的表格 (class="table table-bordered")
- 鼠标悬停 (class="table table-hover")
- 紧缩表格 (class="table table-condensed")
- 响应式表格 (class="table table-responsive")
基本的表格给table标签增加.table样式,使其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。
<table>
</table>
# 四、实验步骤:
打开src/main/webapp/index.html
1.编写容器,使table左右留出一些间距
2.编写table标签,
3.编写表头和表体
**运行项目**
点击项目运行按钮,一直等到项目成功启动,点击项目网站,将显示网站的首页。如果未显示首页,可点击网址右边的刷新按钮。
# 五、拓展练习
我们可以修改表格的样式,变为条纹表格,鼠标悬停等表格。
完整代码链接:https://www.itbegin.com/apps/mooc/8dd90bbd473542b7a1f3fb1fc26918ee
ITbegin是专注于在线编程应用和研发的互联网公司,官网:www.itbegin.com