HTML 表格

欲无缘

已于 2024-01-15 14:39:40 修改

阅读量1.2k

点赞数 25

分类专栏： # HTML 文章标签： html 前端

于 2024-01-15 14:36:26 首次发布

本文链接：https://blog.csdn.net/qq_29917503/article/details/135600119

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

基础表格

<table>
	<caption>我是表格的标题</caption>
	<thead>
	    <tr>
	        <th>编号</th>
	        <th>姓名</th>
	        <th>性别</th>
	    </tr>
    </thead>
    <tbody>
	    <tr>
	        <td>1</td>
	        <td>张三</td>
	        <td>男</td>
	    </tr>
	    <tr>
	        <td>2</td>
	        <td>李四</td>
	        <td>女</td>
	    </tr>
    </tbody>
</table>

标签介绍

table:表示一个表格的开始和结尾，所有表格的内容全部被嵌套在 table元素中，必须
tr:表示一行，被table嵌套，内部嵌套td，必须
td:表示一列，被tr嵌套，必须
thead:不是必须，多嵌套表头，也就是表格的第一行一般搭配css使用
th:效果同td，只不过内部文本自动居中加粗
tbody:一般嵌套表格的主体部分，不是必须，多搭配css使用
caption:用来设置表格标题，不是必须

注意：table、tr、td以上三个元素在表格中缺一不可横行竖列

运行效果

默认无边框通过<table border="1"> </table> 设置边框

在这里插入图片描述

背景色

bgcolor: 颜色
在html中设置颜色时可以使用以下三种方式

直接使用颜色的单词
色号 #FFFFFF - #000000
使用IDE工具提供的选色工具
使用rgb三原色设置

<tr bgcolor="coral">
	<th>列1</th>			
</tr>

水平对齐

align:水平对齐单元格内部的内容 right left center注意默认是局左对齐

<td align="right">列1</td>

垂直对齐

valign:垂直对齐 top bottom middle

<td valign="top">列1</td>
<td valign="middle">列2</td>
<td valign="bottom">列3</td>

合并单元格

在表格中一行多少列是固定不变的如果需要进行单元格的增减，则可以使用合并单元格的形式
不能随意少写或者不写单元格 colspan=“合并单元格的个数”

<td colspan="5">列1</td>

表格嵌套

在一个表格中可以再次嵌套一个表格，但是注意，被嵌套的表格必须放置在td中

<td>
	<table bgcolor="greenyellow" cellspacing="0" 
		border="1px" width="100%" height="100%" bordercolor="red">
		<tr>
			<td>内部列1</td>
			<td>内部列2</td>
			<td>内部列3</td>
		</tr>
		<tr>
			<td>内部列1</td>
			<td>内部列2</td>
			<td>内部列3</td>
		</tr>
		<tr>
			<td>内部列1</td>
			<td>内部列2</td>
			<td>内部列3</td>
		</tr>
	</table>
</td>

样式预览

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>表格</title>
	</head>
	<body>
		
		<table width="500px" height="400px" border="1px"
		cellspacing="0">
			<caption>我是表格的标题</caption>
			<thead>
			
				<tr bgcolor="coral">
					<th>列1</th>
					<th>列2</th>
					<th>列3</th>
					<th>列4</th>
					<th>列5</th>
				</tr>
			</thead>
			<tbody>
				<tr>
				
					<td align="right">列1</td>
					<td align="left">列2</td>
					<td align="center">列3</td>
					<td>列4</td>
					<td>列5</td>
				</tr>
				<tr>
					
					<td valign="top">列1</td>
					<td valign="middle">列2</td>
					<td valign="bottom">列3</td>
					<td>列4</td>
					<td>列5</td>
				</tr>
				<tr>
				
					<td colspan="5">列1</td>
				</tr>
				<tr>
					<td>列1</td>
					<td>列2</td>
					<td>
						<table bgcolor="greenyellow" cellspacing="0"
						border="1px" width="100%" height="100%"
						bordercolor="red">
							<tr>
								<td>内部列1</td>
								<td>内部列2</td>
								<td>内部列3</td>
							</tr>
							<tr>
								<td>内部列1</td>
								<td>内部列2</td>
								<td>内部列3</td>
							</tr>
							<tr>
								<td>内部列1</td>
								<td>内部列2</td>
								<td>内部列3</td>
							</tr>
						</table>
					</td>
					<td>列4</td>
					<td>列5</td>
				</tr>
				<tr>
					<td>列1</td>
					<td>列2</td>
					<td>列3</td>
					<td>列4</td>
					<td>列5</td>
				</tr>
				<tr>
					<td>列1</td>
					<td>列2</td>
					<td>列3</td>
					<td>列4</td>
					<td>列5</td>
				</tr>
				<tr>
					<td>列1</td>
					<td>列2</td>
					<td>列3</td>
					<td>列4</td>
					<td>列5</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>