**html表格** ```

HTML Table

Company	Contact	Country
Alfreds Fytterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

``` 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200507-1588857473344) > 每个表行用tr定义，表头用th定义（粗体居中） > 元素是表的数据容器。它们可以包含各种HTML元素。文字，图片，列表，其他表格等。 ```

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94

``` 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200507-1588858030098) **html5表格添加边框** > 1px表示宽度，solid表示实线，black表示边框颜色。 ```

Border Table

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

``` 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200507-1588858472541) **html5表格边框折叠** ```

Border Table

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

Firstname	Lastname	Age
Jill	Smith	50
John	Doe	80

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200507-1588858696649) **单元表格填充** ```

Border Table

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

Firstname	Lastname	Age
Jill	Smith	50
John	Doe	80

``` 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200507-1588858870808) **html5右对齐标题** ```

HTML Table

Firstname	Lastname	Age
Jill	Smith	50
John	Doe	80

Company	Contact	Country
Alfreds Fytterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

``` 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200508-1588930526693) **html5添加边框空隙** ```

HTML Table

Company	Contact	Country
Alfreds Fytterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

``` 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200508-1588930643429) **html5单元格跨列** ```

HTML Table

Name	Telephone
Bill Gates	55577854	55577855

``` 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200508-1588930884976) **html5单元格跨行** ```

HTML Table

Name	Bill Gates
Telephone:	55577854
Telephone:	55577855

``` 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200508-1588931053798) **html5表格添加标题** ```

HTML Table

Monthly savings
Month	Savings
January	$100
February	$50

``` 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200508-1588931320095) **HTML5表格对应特定样式** - 要为特殊表格定义特殊样式，请向该表添加id属性： ```

HTML Table

Firstname	Lastname	Age
Eve	Jackson	94

``` 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200508-1588931961697) - 为表格定义特定的样式： ```

HTML Table

Firstname	Lastname	Age
Eve	Jackson	94

``` 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200508-1588932339773) - 添加更多的样式： ```

HTML Table

Firstname	Lastname	Age
Eve	Jackson	94

``` 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200508-1588932639764) **HTML5 标签** > colgroup标记指定表中一组用于格式化的一列或多列。 > colgroup标记必须是table元素的子元素，在任何 caption元素之后以及在任何thead，tbody，tfoot和tr元素之前。 ```

HTML Table

ISBN	Title	Price
3476896	My first HTML	$53

``` 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200508-1588935630805) ```

The colgroup element

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

``` 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200508-1588936458100) **HTML5 标签，标签，标签** > 引用文字 ```

The colgroup element

Month	Savings
January	$80
Sum	$180

``` 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370469-20200508-1588936697718) **练习** ``` ``` 运行结果 ![image.png](https://dn-simplecloud.shiyanlou.com/cou

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

“Web开发基础”实验报告