Web开发基础-CSS-12

最新推荐文章于 2024-08-02 18:01:26 发布

原创最新推荐文章于 2024-08-02 18:01:26 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

Web开发专栏收录该内容

108 篇文章

订阅专栏

本文介绍如何使用CSS设置表格样式，包括边框样式、单元格对齐方式及高度等，通过具体示例展示了如何实现美观且实用的表格布局。

CSS中设置表格样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格样式</title>
		<style type="text/css">
			table {
				border:1px solid red;
				/* 边框合并 */
				border-collapse:collapse;
				width:300px;
				margin:50px auto;
			}
		
			td {
				border:1px solid red;
				text-align:center;
				line-height:30px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>苍老师</td>
				<td>范老师</td>
			</tr>
			<tr>
				<td>王老师</td>
				<td>程老师</td>
			</tr>
		</table>
	
	</body>
</html>

最终页面效果：