- [HTML5表格](#html5表格) - [定义html5表格](#定义html5表格) - [html5表格添加边框](#html5表格添加边框) - [HTML5表格边框折叠](#html5表格边框折叠) - [HTML5表格单元填充](#html5表格单元填充) - [HTML5 左对齐标题](#html5-左对齐标题) - [HTML5添加边框空隙](#html5添加边框空隙) - [HTML5单元格跨列](#html5单元格跨列) - [HTML5单元格跨行](#html5单元格跨行) - [HTML5表格添加标题](#html5表格添加标题) - [HTML5表格对应特定样式](#html5表格对应特定样式) - [HTML5 标签](#html5-colgroup标签) - [HTML5 标签，标签，标签](#html5-thead标签tbody标签tfoot标签) - [综合应用](#综合应用) # HTML5表格 ```html

HTML Table

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200506-1588761024964) ## 定义html5表格 ```html

Firstname	Lastname	Lastname
Jill	Smith	50
Eve	Jackson	94

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200506-1588761498774) ## html5表格添加边框 ```html

Bordered Table

Use the CSS border property to add a border to the table.

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94
John	Doe	80

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200506-1588761855307) ### HTML5表格边框折叠 ```html table, th, td { border: 1px solid black; border-collapse: collapse; } ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200507-1588845289819) ### HTML5表格单元填充 ```html th, td { padding: 15px; } ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200507-1588860739726) ### HTML5 左对齐标题 ```html th{ text-align: left; } ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200507-1588853498779) ### HTML5添加边框空隙 ```html table { border-spacing: 5px; } ``` * 之前： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200507-1588853609891) * 之后： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200507-1588853566088) ### HTML5单元格跨列 ```html

Name	Telephone
Bill Gates	55577854	55577855

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200507-1588853981086) ### HTML5单元格跨行 ```html

Name:	Bill Gates
Telephone:	55577854
Telephone:	55577855

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200507-1588854030287) ### HTML5表格添加标题 ```html

Monthly savings
Month	Savings
January	$100
February	$50

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200507-1588860899688) ### HTML5表格对应特定样式 ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200507-1588846234126) ### HTML5 标签 ```html

ISBN	Title	Price
3476896	My first HTML	$53
5869207	My first CSS	$49

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200507-1588852629312) ### HTML5 标签，标签，标签 ```html

Month	Savings
January	$100
February	$80
Sum	$180

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200507-1588852896093) ### 综合应用 ```html

姓名	课程	成绩
张三	Web开发 Java OO	90 80 70
李四	Web开发 Java	70 60
周吴	Web开发 Java OO	50 30 60

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200507-1588860365661)

“Web开发基础”实验报告