网页中表格的实现

当然是发发啦！

已于 2023-12-23 11:49:26 修改

阅读量598

点赞数 12

分类专栏： Html网页文章标签： html5

于 2023-12-23 08:29:04 首次发布

本文链接：https://blog.csdn.net/m0_72536055/article/details/135164256

版权

Html网页专栏收录该内容

10 篇文章 0 订阅

订阅专栏

表格:一种可视化交流模式，又是一种组织整理数据的手段。

在网页中如何制作表格？

table标签表格标签双标签

语法：<table></table>

属性：border边框、width宽(单位px像素,%百分比)、height高、bgcolor表格背景色

align=“left/center/right”水平对齐方式

表格特有属性：cellspacing间距(默认2px)，单元格和单元格之间的距离。

cellpadding边距(默认1px)，单元格内部的内容和单元格边界之间的距离。

tr标签表格行标签双标签

语法：<table><tr></tr></table>

属性：height行高、bgcolor背景色

align="left/center/right"水平对齐方式

valign="top/middle/bottom"垂直对齐方式

th标签标题单元格标签双标签

td标签普通单元格标签双标签

th和td的语法一样

语法：<table><tr><td></td></tr></table>

属性：width格宽、bgcolor背景色

align="left/center/right"水平对齐方式

valign="top/middle/bottom"垂直对齐方式

单元格特有属性：colspan="数值"，横向/水平合并多个单元格

rowspan="数值"，竖向/垂直合并多个单元格

<!DOCTYPE html> <!-- 声明文档类型，首行 -->
<html lang="en"/> 	<!-- 网页结构 -->
<head>
	<meta charset="UTF-8"> <!--meta 定义字符编码 -->
	<title>Document</title> <!-- 网页标题,一定放在head中 -->
</head>
<body>
	<!-- 整体是表格table,表格行tr嵌套单元格th/td
		 th/td是并列关系,不可以嵌套 -->
	<table>
		<tr>
			<th>标题</th>  <!-- 标题单元格 -->
		</tr>
		<tr>
			<td>数据</td> <!-- 普通单元格 -->
			<td>数据</td>
		</tr>
	</table>
</body>
</html>

如何实现1px表格？

设表格背景色，细线的颜色就是表格的背景色；
设表格行tr的背景色；
设单元格间距cellspacing="1"，边框border="0px"。

制作表格步骤？

输入表格的基本结构
给表格table加属性
1. border="1"
2. width/height
3. cellspacing="0" 单元间距
4. align="center" 表格居中（看效果是否需要）
制作1px细线表格
tr/th单元的合并（看效果加）
1. 有标题单元格就需要把td该成th
2. 宽高不一样，优先设置height
tr标签看是否需要居中(表格)