#第一个表格实例 ```

HTML Table

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco chang	Mexico
Ernst Handek	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/uid1356258-20200508-1588927025293) #定义HTML表格 > HTML表格用``````定义 > 每行都用``````进行定义，表头用``````标签 ```

The colgroup element

```定义，表数据用```

```进行标记。 ```

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200508-1588927905280) #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

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200508-1588928195409) #HTML5表格边框折叠 ``` ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200508-1588928377242) #HTML5表格单元填充 ``` ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200508-1588928488868) #THML5左对齐标题 >默认情况下，表标题为粗体居中 ``` th{ text-align:left; } ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200508-1588928730464) #HTML5添加边框空隙 > 边框折叠时无效 ``` ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200508-1588929018713) #HTML5单元格跨列 ```

Bordered Table

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

Name	Telephone
Bill Gates	55577854	55577855

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200508-1588929231407) #HTML5单元格跨行 ```

Name:	Bill Gates
Telephone:	55577854
Telephone:	55577855

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200508-1588929485279) #HTML表格添加标题 ```

Monthly savings
Month	Savings
January	$100
February	$50

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200508-1588929692958) #HTML5表格对应特定样式 ```

Bordered Table

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

Firstname	Lastname	Age
Eve	Jackson	94

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200508-1588930091533) #HTML5 ```

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

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200508-1588930547067) #``````标签，``````标签，``````标签 ```

Month	Savings
January	$100
February	$80
Sum	$180

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200508-1588930933408) #练习 ```

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

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200508-1588931922461)

“Web开发基础”实验报告