表格其实就是很多的小单元格,而这些小单元格很有次序的排列着,它们有很多行,很多列。这些很多行列组成的东西,就叫表格,表格是<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>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>