前端html——表格、合并、更改表格边框颜色

最新推荐文章于 2024-06-17 00:04:45 发布

不要生病~

最新推荐文章于 2024-06-17 00:04:45 发布

阅读量8.6k

点赞数 7

分类专栏：前端文章标签： HTML 表格

本文链接：https://blog.csdn.net/qq_41141657/article/details/87339841

版权

前端专栏收录该内容

35 篇文章 1 订阅

订阅专栏

水平居中 center
垂直居中 middle

table表示声明一个表格
tr标签用来声明一行
td标签用来声明一个单元格
表格是横平竖直的，每一行单元格的数量都应该是一样的
每一行单元格的高度都一样
每一列单元格的宽度都一样

合并

保留要合并的单元格的第一个，删除其他的
给保留下来的单元格横向或纵向占用的单元格的数量
合并左右关系的单元格，用colspan
合并上下关系，用rowspan
数字为跨行内容共占了多少行

更改表格边框颜色

表格家边框<table border="1">
更改表格边框颜色css——table tr td{border:1px solid 颜色;}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<table border="1" width="500" height="400" cellspacing="" cellpadding="" align="center">
		<!--
		table中的宽、高为整个表格总宽、高分配
		table中的align属性用来控制单元格在父级元素的位置
		tr中的align 调整左右、valign调整上下
		-->
			<tr>
				<th>课程表</th>
			</tr>
			
			<!--第一列-->
			<tr height="200" bgcolor="greenyellow" valign="top" align="right">
		    <!--单独行的高度-->
				<td></td>
				<td>周一</td>
				<td>周二</td>
				<td>周三</td>
				<td>周四</td>
				<td>周五</td>
			</tr>
			
			<tr>
				<td>第一节课</td>
				<td>语文</td>
				<td>数学</td>
				<td colspan="3">英语</td>
			</tr>
			<tr>
				<td>第二节课</td>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>物理</td>
				<td>化学</td>
			</tr>
			<tr>
				<td>第三节课</td>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>物理</td>
				<td>化学</td>
			</tr>
			
			<!--  tr*4>td*6   快捷写四行六列   -->
		</table>
		
	</body>
</html>

代码演示

不要生病~

关注

7
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
前端html——表格、合并、更改表格边框颜色

水平居中 center垂直居中 middletable表示声明一个表格tr标签用来声明一行td标签用来声明一个单元格表格是横平竖直的，每一行单元格的数量都应该是一样的每一行单元格的高度都一样每一列单元格的宽度都一样合并保留要合并的单元格的第一个，删除其他的给保留下来的单元格横向或纵向占用的单元格的数量（合并左右关系的单元格，用colspan、合并上下关系，用rowspan...
复制链接

扫一扫

专栏目录