html 表格

最新推荐文章于 2024-11-07 15:45:53 发布

qq_652530495

最新推荐文章于 2024-11-07 15:45:53 发布

阅读量136

点赞数 1

分类专栏： python开发文章标签： html table

本文链接：https://blog.youkuaiyun.com/qq_22526061/article/details/90080282

版权

python开发专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>可编辑表格</title>
        <style>
        	table{
        		margin:0 auto; /* 表格居中 */
        		font-size:30px; /* 字体大小 */
        		width:800px; /*表格宽度 */
        		text-align: center;/* 内容居中 */
        		background: #FFF; /* 背景色 */
        		table-layout: fixed;/* 表格布局是根据内容 还是 固定大小 （搭配td/th width属性使用） */
        		empty-cells: hide; /*是否显示空的单元格 hide后 空单元格框就没了 */
        		border-collapse:separate; /* 边框塌陷 外边框就没了 */
        		border-spacing:15px 30px; /* 先左右 后上下 td之间间隔  不能设置边框塌陷*/
        		/*background-color: blue;*/
        	}
        	caption{
        		caption-side: bottom; /*设置标题位置 */
        	}
        	table th{
        		border:1px solid gold;  /*th边框*/
        	}
        	table td{
        		border:1px solid red;   /*td边框*/
        	}
        	table tr:nth-child(even){ /*设置偶数行颜色 */
	            background-color: #FFF;
	        }
	        
	        table tr:nth-child(odd){/*设置奇数行颜色 */
	            background: red;
	        }
	        table th{
	        	background-color: pink;/*设置标题颜色 */
	        }

        </style>
    <head>
<body>

<form>
	<table frame="box" id="table1">
		<caption>This is a caption</caption>
		<tr>
			<th>标题1</th>
			<th>标题2</th>
		</tr>
		<tr>
		<td>
			内容1
		</td>
		<td></td>
		</tr>
		<tr>
		<td>
			内容2
		</td>
		<td>neirong2</td>
		</tr>
		<tr>
		<td>
			内容3
		</td>
		<td>neirong3</td>
		</tr>
	</table>
</form>
</body>