table

<css 六>table_第1张图片

border:(表格边框)
<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		table,th,td{
			border:1px solid gray;
		}	
	</style>
</head>
<body>
	<table>
		<tr>
			<th>表头</th>
			<td>格子</td>
			<td>格子</td>
		</tr>
		<tr>
			<td>A</td>
			<td>B</td>
			<td>C</td>
		</tr>
	</table>
</body>
</html>
<css 六>table_第2张图片
边框折叠:(border-collapse)
border-collapse:collapse;
宽度-width、高度-height设定:
width:75%;
height:55px;
表格中的文本对其方式:(text-align)
td{
	text-align:top/bottom/left/right/center;
    }
垂直对其方式:(vertical-align)
td{
	vertical-align:top/bottom/left/right/center;
}
内边框设定:(padding)
td{
	padding:5px;
}
表格颜色:
th{
      border:3px solid green;
      background-color:gray;
}
td{
	background-color:red;		
}
单元格边框:
table{
	border-spacing:20px;或
        border-spacing:20px  50px;
}
表格标题位置:
table{
	caption-side:bottom/top;
	}
<body>
	<table>
	            <caption>表格标题</caption>
	</table>
</body>
是否显示表格中的空单元格:
table{
	border-collapse:separate;
	empty-cells:hide/show;
  }
表格布局算法:
table{
  table-layout:fixed;
		列宽由表格宽度和列宽度设定。
  table-layout:table-layout:automatic;
		默认。列宽度由单元格内容设定。
  }

你可能感兴趣的:(table)