从设计稿到HTML
V
第一节
认识表格布局法
用表格定位网页元素
表格定位法是把整个网页当做一个或多个表格来进行划分,然后将文本
或图片等不同的网页元素分别填充到到一个个单元格里面。
通过单元格的相对对齐属性来进行定位,比如居中,居左等。
• 这是一种传统的网页制作方法,在现阶段专业的网页制作当中已不被推荐,因为不符
合HTML语义的标准,即HTML中的表格元素应仅用于数据类表格,而不是用于布局。但
专业的网页制作需要更多的技术背景,而该方法可以作为应急的手段。
表格创建
表格的基本代码结构
第一个单元格 | 第二个单元格 |
第一个单元格 | 第二个单元格 |
表格选择
• 选择表格,属性面板就会切换为表格属性
• 只要我们把鼠标放在表格边界上点击就可以
选择表格,表格选定后会有黑色手柄出现。
• 表格的标签为
条中的相应标签来选中整个表格。 (推荐)
表格属性
项目 说明 备注
表格 Id 表格名
Rows行 行数
Cols列 列数
W宽 宽度
单位有两种形式:像素/百分比
H高 高度
CellPad填充 单元格内元素到容器边界的距离
缺省值不等于0
CellSpace间距 单元格与单元格之间的距离
Align 对齐 对齐属性 相对于外部容器
Border边框 边框宽度
Bg Color 背景颜色
Brdr Color 边框颜色
Bg Image 背景图像
单元格属性
• 什么是单元格 项目 说明
• 标签
Horz 水平对齐Vert 垂直对齐
• 属性
No Wrap 不换行
Bg (上) 背景图像
Bg (下) 背景颜色
分离
合并
第二节
表格练习
建立一个表格
技巧:
{250, 50}