表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，它们有很多行，很多列。这些很多行列组成的东西，就叫表格，表格是<table>标签来定义的。而<table>标签中的行就是<tr>标签，而列就是<td>标签，必须先定义行才能定义列。因为html中，每一列是在一行当中的。
下表总结了一些常用的标签：
| 表格 | 描述 |
| <table> | 定义表格 |
| <caption> | 定义表格标题 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格的单元 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
| <col> | 定义表格的列属性 |
先定义一个简单的表：
运行后可以看到
<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"> </head> <body> <table border="1"> <tr> <td>水果</td> <td>水果</td> <td>水果</td> </tr> <!-- 下面将td与tr反正写了，是不会构成表的 --> <td> <tr>asd</tr> <tr>asd</tr> <tr>asd</tr> <tr>asd</tr> </td> </table> </body></html>
可以看到，上面注释下面的<td>与<tr>反正写了。会出现一个很细小的表格，但是<tr>中写的文字，是不会显示上去的
所以html中，编写表格是要一行一行的写。<tr>标签中包含<td>
没有边框的表格
没有边框的表格，其实就是在<table>标签中，不加属性border。border这个属性是代表表格的边框。如果不加属性的话，默认border="0" ，但是没有边框有的时候你就看不出来它是一张表格了。所以有的时候会给border="1px"设置1像素的边框。暂时去掉border属性，完成一张没有边框的表格
<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"> </head> <body> <table> <tr> <td>呵呵</td> <td>哈哈</td> <td>嘻嘻</td> </tr> <tr> <td>嘿嘿</td> <td>嘎嘎</td> <td>噗噗</td> </tr> <tr> <td>啊啊</td> <td>哦哦</td> <td>噢噢</td> </tr> </table> </body></html>
表格中的表头 <tr><th>我是表头</th></tr>
还可以给表添加表头，使用<th>标签，<th>标签也是在<tr>标签中的，我们为了好看，还是把border加上：
<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"> </head> <body> <table border="1"> <tr> <th>人物</th> <th>介绍</th> <th>产品</th> </tr> <tr> <td>史蒂夫·保罗·乔布斯</td> <td>苹果CEO</td> <td>Apple系列</td> </tr> <tr> <td>丹尼斯·里奇</td> <td>C语言之父</td> <td>C语言</td> </tr> <tr> <td>比尔·盖茨</td> <td>微软CEO</td> <td>Windows系统</td> </tr> </table> </body></html>
还可以设置表格内的边距 cellpadding 属性 也可以设置单元格边距 cellspacing 属性
<table border="1" cellpadding="10" cellspacing="10"> <tr> <td>xxx</td> </tr></table>
带有标题的表格 <caption>
<table border="1" cellpadding="10" cellspacing="10"> <caption>xxx表</caption> <tr> <td>xxx</td> </tr></table>
表格内的颜色bgcolor属性
<table border="1" bgcolor="red"> <tr> <td>xxx</td> </tr></table>
单元格内容排列 align 属性分别有center、left、right
<table border="1" align="center"> <caption>xxx表</caption> <tr> <td>xxx</td> </tr></table>
跨行和跨列的单元格 colspan属性，准确的来说，就是合并单元格
<table border="1"> <caption>xxx表</caption> <tr> <td colspan="2">xxx</td> <td>xxx</td> </tr> <tr> <td>xxx</td> <td>xxx</td> <td>xxx</td> </tr></table>
列表就是像Word里面的标题一样，顺着往下数的标题。
下标是一些控制标题的标签
| 标签 | 描述 |
| <ol> | 有序列表 |
| <ul> | 无序列表 |
| <li> | 列表项 |
| <dl> | 列表 |
| <dt> | 列表项 |
| <dd> | 描述 |
这些列表还分有序列表，无序列表和自定义列表。
无序列表
<ul>、<li>
属性：disc：实体圆、circle：空心圆、square：实体方块
<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"> </head> <body> <!-- 无序列表默认属性是disc，disc定义一个实体圆，所以disc不用刻意去设置 --> <ul> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> </ul> <!-- 这些属性都是通过type来定义的，circle是定义一个空心圆 --> <ul type="circle"> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> </ul> <!-- square定义实体方块 --> <ul type="square"> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> </ul> </body></html>
新闻热点
疑难解答
