0007 前端 Html 06 表格做页面布局页面布局表格实际用途

最新推荐文章于 2024-04-23 12:43:10 发布

VIP文章马上有的进化

最新推荐文章于 2024-04-23 12:43:10 发布

阅读量312

点赞数

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

本文链接：https://blog.csdn.net/weixin_45964342/article/details/103658339

版权

以下为学习笔记，用来备忘、交流

工具：Sublime Text 3
渲染：谷歌浏览器

用表格做页面布局

具体思路入下：

声明一个表格，可以理解为整个页面就是一个大表格，这个大表格只起到分割页面的作用什么也不显示出来，再定义表格宽高，要把border(表格的边框)、cellpadding(内容与边框的距离)、cellspacing(单元格与单元格的距离)这几项设置为0，align设置为"center"(整个大表格在页面里居中)。
可以在单元格里面再声明一个表格，就是表格里面套表格。尤其是需要多个单元格不同方向合并时，分成一个大表格做框架，再向里面放独立小单元格细分一下。
可以用align和valign设置各个单元格的对齐方式。
结构需要按照需求，先大体分布，再一个一个细分来渐渐完成布局代码，边做边看。
做的时候可以先把border(表格的边框)=1，可以清楚的看到每个单元格的位置，尤其是可以看清上下左右对齐方式。做完后最后一步再将border(表格的边框)=0。

下面练习了一下

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>设备记录</title>
</head>
<body>
	<table width="700" border="0" cellpadding="0" cellspacing="0" align="center">
		<tr align="center">
			<td height="30" width="20%">新建+按键</td>
			<td width="60%">搜索框</td>
			<td width="30%">搜索按钮</td>
		</tr>
		<tr>
			<td colspan="3">
				<hr>
				<table width="700" border="1" cellpadding="0" cellspacing="0"

最低0.47元/天解锁文章

马上有的进化

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0007 前端 Html 06 表格做页面布局页面布局表格实际用途

以下为学习笔记，用来备忘、交流工具：Sublime Text 3渲染：谷歌浏览器用表格做页面布局具体思路入下：声明一个表格，可以理解为整个页面就是一个大表格，这个大表格只起到分割页面的作用什么也不显示出来，再定义表格宽高，要把border(表格的边框)、cellpadding(内容与边框的距离)、cellspacing(单元格与单元格的距离)这几项设置为0，align设置为"cente...
复制链接

扫一扫