【HTML】06-表格

最新推荐文章于 2024-03-11 16:38:18 发布

原创最新推荐文章于 2024-03-11 16:38:18 发布 · 406 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html

HTML教程专栏收录该内容

11 篇文章

订阅专栏

本文介绍了HTML中表格的使用，包括table、tr、th和td标签的基本属性，如border、cellspacing、cellpadding、align等，并通过示例展示了如何进行单元格的跨行(rowspan)和跨列(colspan)合并。此外，还提供了两个实际的表格实例来演示这些概念。

<!--
    表格：
    1.table标签：表示一个表格
        border属性：取值是像素值：px
        cellspacing属性：单元格之间的间隙:px
        cellpadding属性：单元格的内边距
        align属性：设置表格在页面上的对齐方式
        width属性：表格整体宽度
        height属性：表格整体高度
    2.tr标签(table row):一整行
        align属性：设置本行所有单元格内容对齐方式
        height属性：设置本行的高度
    3.th标签(table headline):表格的单元格，和td相比多了加粗和居中的样式
    4.td标签：行内的单元格
        align属性：设置 内容对齐方式
        width属性：设置本单元格的宽度，会影响到一整列
        rowspan属性：跨行合并，上下单元格合并，取值为合并的单元格数量
        colspan属性：跨列合并，左右单元格合并，取值为合并的单元格数量
-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<table width="600px" height="300px" border="1px" cellspacing="0px" cellpadding="10px" align="center">
			<tr height="40px">
				<th width="20px">序号</th>
				<th>姓名</th>
				<th>成绩</th>
			</tr>
			<tr align="center">
				<td>1</td>
				<td>张三</td>
				<td>90</td>
			</tr>
			<tr align="center">
				<td>2</td>
				<td>李四</td>
				<td>80</td>
			</tr>
			<tr align="center">
				<td>2</td>
				<td>王五</td>
				<td>80</td>
			</tr>
			<tr align="center">
				<td>2</td>
				<td>赵六</td>
				<td>80</td>
			</tr>
			<tr align="center">
				<td>2</td>
				<td>孙七</td>
				<td>80</td>
			</tr>
		</table>
		
		<hr>
		
		<!-- 合并单元格 -->
		<table align="center" width="300px" height="300px" border="1px" cellspacing="0">
			<tr align="center">
				<td rowspan="2">1-1 2-1</td>
				<td>1-2</td>
				<td>1-3</td>
			</tr>
			<tr align="center">
				<td>2-2</td>
				<td>2-3</td>
			</tr>
			<tr align="center">
				<td colspan="3">3-1 3-2 3-3</td>
			</tr>
		</table>
		
	</body>
</html>