天天看点

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

水平居中 center

垂直居中 middle

table表示声明一个表格

tr标签用来声明一行

td标签用来声明一个单元格

表格是横平竖直的,每一行单元格的数量都应该是一样的

每一行单元格的高度都一样

每一列单元格的宽度都一样

合并

保留要合并的单元格的第一个,删除其他的

给保留下来的单元格横向或纵向占用的单元格的数量

合并左右关系的单元格,用colspan

合并上下关系,用rowspan

数字为跨行内容共占了多少行

更改表格边框颜色

表格家边框

<table >

更改表格边框颜色css——

table tr td{border:1px solid 颜色;}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<table  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>

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