1、用HTML创建一个表格
<table>标记开始整个表格。<th>元素包含表格表头中的一个单元格，它必须放在一个表行中。<td>元素包含表格中的一个数据单元格，它必须嵌套在一个表行中。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> td,th {border:1px solid black;} </style> <title>Testing Tony's Travels</title> </head> <body> <table> <caption>The cities I visited on my Segway'n USA travels</caption> <tr> <th>City</th> <th>Date</th> <th>Temperature</th> <th>Altitude</th> <th>Population</th> <th>Diner Rating</th> </tr> <tr> <td>Walla Walla,WA</td> <td>June 15th</td> <td>75</td> <td>1,204 ft</td> <td>29,686</td> <td>4/5</td> </tr> <tr> <td>Magic City,ID</td> <td>June 25th</td> <td>74</td> <td>5,312 ft</td> <td>50</td> <td>3/5</td> </tr> </table> </body> </html>2、为表格增加样式
caption-side属性指定标题在表格的位置。border-spacing属性指定边框间距，是针对整个表格定义的。border-collapse属性折叠边框，使单元格之间没有边框间距。
table { margin-left:20px; margin-right:20px; border:thin solid black; caption-side:bottom; border-collapse:collapse; }为各行指定交替颜色的方法：nth-child伪类，状态则是一个元素相对于它的兄弟元素的数字顺序。
tr:nth-child(even){ background-color: red; } tr:nth-child(odd) { background-color: green; }单元格跨多行，可以使用rowspan属性指定一个表格数据单元格占多少行，然后从这个单元格所跨越的其他行删除对应的表格数据元素。
单元格跨多列，可以使用colspan属性指定一个表格数据单元格占多少列，然后从这个单元格所跨越的同一行删除对应的表格数据元素。
<td rowspan="2"></td> <td colspan="2"></td>3、知识点
HTML表格用来建立表格数据结构。HTML表格元素<table>、<tr>、<th>和<td>一起用来创建一个表格。<table>元素定义并包围整个表格。表格使用<tr>元素按行定义。每行包含一个或多个数据单元格，分别用<td>元素定义。使用<th>元素表示作为行或列表头的数据单元格。表格采用格状布局。每行对应HTML中的一个<tr>......</tr>行，每列对应行中的<td>......</td>内容。可以用<caption>元素提供关于表格的额外信息。表格有边框间距，也就是单元格之间的间距。表格数据单元格还可以有内边距和边框。就像能够控制元素的内边距、边框和外边距一样，可以用CSS控制表格单元格的内边距、边距和边框间距。border-collapse是针对表格的一个特殊的CSS属性，允许将单元格边框合并为一个边框，让外观更简洁。可以用text-align和vertical-align CSS属性改变表格单元格中数据的对齐方式。可以用background-color属性为表格增加颜色。可以为整个表格、各行或者单个的数据单元格增加背景颜色。使用CSS nth-child伪类可以为表格隔行增加背景颜色。如果一个数据单元格没有数据，<td>元素中不放置任何内容。不过，需要使用一个<td>......</td>元素维持表格的对齐。如果你的数据单元格需要跨多行或多列，可以使用<td>元素的rowspan或colspan属性。可以在表格中嵌套表格，将<table>元素及其所有内容放在一个数据单元格中。表格应当于表示表格数据，而不是建立页面布局。另一方面，可以像第11章所介绍的，使用CSS表格显示创建多栏页面布局。与所有其他元素一样，可以用CSS指定列表的样式。有几个特定于列表的CSS属性，如list-style-type和list-style-image。list-style-type允许改变列表中使用的列表标记类型。list-style-image允许指定列表标记图像。转载于:https://www.cnblogs.com/giscode/p/6627456.html
