HTML表格_html 表结构-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41298721/article/details/88198831

HTML表结构

从语义上划分表格为：表头、表主体、表尾

table 标签标识表格标签
tr 标签标识行标签
td 标签标识单元格标签
th 标签标识表格头部标签
border 标识表格边框属性
width 属性设置表格宽度
bgcolor 属性设置表格背景颜色
background 属性设置表格的背景图片
caption 表格的标题
thead 标签标识表格头部元素
tbody 标签标识表格表体元素
tfoot 标签标识表格表尾部分
cellpadding 表格中内容和单元格之间的距离
cellspacing 表格中单元格和单元格之间的距离
在默认情况下，如果不设置表格的边界，表格不显示边界的，可以用border属性设置表格边框

代码展示：

	<body>
   
       <table border="1">
       	<!--表格标题-->
       	<caption><h2>学生成绩表</h2></caption>
       	<!--tr 行-->
       	<tr>
       		<!--标题列-->
       		<th>学号</th>
       		<th>姓名</th>
       		<th>年龄</th>
       	</tr>
       	<tr>
       		<td>1001</td>
       		<td>尼古拉斯赵四</td>
       		<td>20</td>
       	</tr>
       	<tr>
       		<td>1002</td>
       		<td>刘能</td>
       		<td>30</td>
       	</tr>
       	<tr>
       		<td>1003</td>
       		<td>谢广坤</td>
       		<td>20</td>
       	</tr>
       </table>
	</body>

效果：

关于跨行和跨列

主要就是说一下关于合并行和列的方法

    rowspan   合并行
    colspan   合并列
    thead 标签标识表格头部元素
tbody 标签标识表格表体元素
tfoot 标签标识表格表尾部分

代码展示：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table{
				width: 600px;/*表格宽度*/
				margin: 0 auto;/*设置表格左右居中*/
			}
			table,th,td{
				border-collapse: collapse;/*把所有的table,th,td标签的边框进行合并*/
				text-align: center;/*文本水平居中*/
			}
		</style>
	</head>
	<body>
	 <table border="1">
	 	<caption>学生课程表</caption>
	 	<thead style="background-color: antiquewhite;">
	 	<tr>
	 		<th>时间</th>
	 		<th>星期一</th>
	 		<th>星期二</th>
	 		<th>星期三</th>
	 		<th>星期四</th>
	 		<th>星期五</th>
	 	</tr>
	 	</thead>
	 	
	 	<tbody style="background-color: #0000FF;">
	 	 <tr >
	 	 	<td rowspan="2">上午</td>
	 	 	<td>语文</td>
	 	 	<td>语文</td>
	 	 	<td>英语</td>
	 	 	<td>语文</td>
	 	 	<td>英语</td>
	 	 </tr>
	 	 <tr>
	 	 	
	 	 	<td>政治</td>
	 	 	<td>数学</td>
	 	 	<td>物理</td>
	 	 	<td>语文</td>
	 	 	<td>数学</td>
	 	 </tr>
	 	 <tr>
	 	 	<td rowspan="2">下午</td>
	 	 	<td>体育</td>
	 	 	<td>历史</td>
	 	 	<td>化学</td>
	 	 	<td>语文</td>
	 	 	<td>数学</td>
	 	 </tr>
	 	 <tr>
	 	 	
	 	 	<td>作文</td>
	 	 	<td>微机</td>
	 	 	<td>音乐</td>
	 	 	<td>体育</td>
	 	 	<td>体育</td>
	 	 </tr>
	 	 </tbody>
	 	 <tfoot style="background-color: cadetblue;">
	 	 <tr>
	 	 	<td>晚上</td>
	 	 	<td colspan="5">自习</td>
	 	 	
	 	 </tr>
	 	 </tfoot>
	 </table>
	</body>

</html>

效果图

表格嵌套

在表格里还可以继续嵌套表格，这里直接看代码吧

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1">
			<tr>
				<td><img src="../img/hetao.jpg"></td>
				<td>
				<ul>
					<li>张三丰</li>
				</ul>
				</td>
				<td>
					<table>
						<tr>
							<td>呵呵</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>