**表格实例** ```

HTML Table

Company	Contact	Country
Alfreds Futterkiste	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/uid1370626-20200503-1588508090781) ```

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588508163233) **添加边框** ```

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/uid1370626-20200503-1588508280852) **边框折叠** ``` table, th, td { border: 1px solid black; border-collapse: collapse; } ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200508-1588902543756) **单元填充** ``` th, td { padding: 15px; } ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588508429201) **左对齐** ``` th { text-align: left; } ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588508485815) **边框间隙** ``` table { border-spacing: 5px; } ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588508582197) ```

Name	Telephone
Bill Gates	55577854	55577855

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588508981853) - 跨行 ```

Name:	Bill Gates
Telephone:	55577854
Telephone:	55577855

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588509025049) - HTML5表格添加标题 ```

Monthly savings
Month	Savings
January	$100
February	$50

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588509058147) - 表格格式 ```

Firstname	Lastname	Age
Eve	Jackson	94

``` ``` table#t01 { width: 100%; background-color: #f1f1c1; } ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588509274247) ``` table#t01 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color: #fff; } table#t01 th { color: white; background-color: black; } ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588509335784) - HTML5 标签 ```

ISBN	Title	Price
3476896	My first HTML	$53

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588509426660) ```

The colgroup element

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

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588509469057) - HTML5 标签，标签，标签 ```

Month	Savings
January	$100
February	$80
Sum	$180

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588509577223) - 练习 ```

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

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588510375671) - 第一个表单示例 ```

HTML Forms

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588510429120) - 文本输入框 ``` ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588510491117) - 单选按钮 ``` ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588510534578) - 提交按钮 ``` ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588510569981) - select 元素 ``` ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588510726534) - 使用multiple属性允许用户选择多个值： ``` ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588510843165) - textarea元素 ``` ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588510910145) ``` ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588510947935) - fieldset和legend元素 ``` ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588511051905) - datalist元素 ``` ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588511081023) -output元素 ``` ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370626-20200503-1588511138979)

“Web开发基础”实验报告