表格:一种可视化交流模式,又是一种组织整理数据的手段。
在网页中如何制作表格?
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加属性
- border="1"
- width/height
- cellspacing="0" 单元间距
- align="center" 表格居中(看效果是否需要)
- 制作1px细线表格
- tr/th单元的合并(看效果加)
- 有标题单元格就需要把td该成th
- 宽高不一样,优先设置height
- tr标签看是否需要居中(表格)
表格嵌套(布局)
最外层表格实现
- 书写表格基本结构
- 设置表格宽高,行高
- 单元格宽度
表格3部分:thead表头、tbody表体、tfoot表尾
- 一个表格中只有一个表头thead表尾tfoot
- 一个表格中可以有多个表体tbody