表格简单介绍


表格:table
thead:表头
tbody:主体内容
tfoot:表尾
tr:表格的一行
td:表格的一列。
th:表格的一列,但是此列字体会加粗、居中。
虽然在表格中区分了表头、主体和尾部,但是在实际使用时就省略了,直接写tr、td和th
如果没有写thead、tbody、tfoot,那么浏览器会自动添加tbody

border:定义表格的边框宽度,直接写在table标签上,直接写数字即可。
td/th会有一个默认的padding,大小为1

table在没有定义宽度的情况下,默认由内容撑开;写了宽高后每一列平分。
如果当前列某一个单元格(td/th)宽度变化,则整列都会发生变化。

margin无法实现表格单元格之间的间隔。


表格样式:
border-collapse:边框合并。
    取值:collapse-->合并
         separate(默认值)-->分离。在表格定义了边框时会出现双边框现象。

单元格属性:
colspan:单元格横跨的列数。
rowspan:单元格纵跨的行数。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border-collapse: collapse;
				width: 800px;
				height: 200px;
			}
			td,th{
				padding: 0;
			}
		</style>
	</head>
	<body>
		<table border="1">
			<tr>
				<th>周一</th>
				<th>周二</th>
				<th>周三</th>
				<th>周四</th>
				<th>周五</th>
			</tr>
			<tr>
				<td colspan="2">张三</td>
				<td rowspan="2">李四</td>
				<td>王五</td>
				<td>赵六</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>李四</td>
				<td>王五</td>
				<td>赵六</td>
			</tr>
		</table>
	</body>
</html>

    效果如下所示:
  
 


    

猜你喜欢

转载自java1010.iteye.com/blog/2411093