css表格

HTML CSS 表格布局示例

最新推荐文章于 2023-09-19 08:17:02 发布

原创最新推荐文章于 2023-09-19 08:17:02 发布 · 452 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

网页设计与制作同时被 2 个专栏收录

13 篇文章

订阅专栏

css

7 篇文章

订阅专栏

本文通过一个具体的示例介绍了如何使用 HTML 和 CSS 来实现表格布局，包括设置表格边框样式、宽度和间距等。展示了如何通过 CSS 控制表格元素的外观，如边框的颜色、宽度及单元格的固定宽度。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table {
				border: solid;
				border-width: 5px;
				border-bottom-width: 10px;
				border-color: red;
				/*border-collapse: collapse;*/
				/*合并边框*/
				table-layout: fixed;
				border-spacing: 20px;
			}
			
			td {
				border: solid;
				border-width: 3px;
			}
			
			div {
				width: 1000px;
				height: 200px;
				border: solid;
				border-width: 10px;
			}
		</style>
	</head>
	<!--    	
    	描述：边框(table div body form)
    	
    	border : solid 实心线  double 双线  默认不显示
    	border-width : 边框的宽度 各个方向的边框可以单独制定
    		border-bottom-width
    	border-color : 边框颜色
    		border-top-color/border-bottom-colot ... 各个方向的边框可以单独制定
    	border-spacing: 边框间距	
    	table-layout ：设置单元格宽度  auto :自动拉伸
    							fixed:固定单元格宽度  
    -->

	<body>
		<table>
			<tr>
				<td>HTML</td>
				<td>CSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSS</td>
				<td>JavaScript</td>
			</tr>
			<tr>
				<td>1.5天1.5天1.5天1.5天1.5天1.5天1.5天1.5天1.5天1.5天1.5天1.5天1.5天1.5天1.5天</td>
				<td>1天</td>
				<td>2.5天</td>
			</tr>
		</table>

		<div></div>

		<form></form>

	</body>

</html>