使用HTML 元素定义一个表使用HTML 元素定义表行使用HTML

元素定义表数据使用HTML

元素定义表标题使用HTML

元素定义表格标题使用CSS border属性定义边框使用CSS border-collapse属性折叠单元格边框使用CSS padding属性将填充添加到单元格使用CSS text-align属性对齐单元格文本使用CSS border-spacing属性设置单元格之间的间距使用colspan属性使单元格跨很多列使用rowspan属性使一个单元格跨很多行使用id属性唯一定义一个表

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

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94

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

如上节效果所示，表格的边框是分开的两条实线表示，如果希望表格的边框合并成一个边框，请添加CSS `border-collapse`属性： table, th, td { border: 1px solid black; border-collapse: collapse; } 要使一个单元格跨越一列以上，请使用`colspan`属性：

Name	Telephone
Bill Gates	55577854	55577855

要使一个单元格跨度超过一行，请使用`rowspan`属性：

Name:	Bill Gates
Telephone:	55577854
Telephone:	55577855

要将标题添加到表，请使用`caption`标记：

Monthly savings
Month	Savings
January	$100
February	$50

Firstname	Lastname	Age
Eve	Jackson	94

使用和标记设置三列的背景色,源代码示例如下：

ISBN	Title	Price
3476896	My first HTML	$53

The colgroup element

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

姓名	课程	成绩
深蓝	Web开发 Java python	100 100 100
李四	Web开发 Java	0 0
周吴	Web开发 Java OO	0 0 0

![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370597-20200505-1588639139941) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370597-20200505-1588639151178) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370597-20200505-1588639164506) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370597-20200505-1588639173103)

“Web开发基础”实验报告