本文详细介绍了HTML5中的表格、列表和表单元素及属性。表格包括基本结构、属性、跨行跨列；列表分为无序列表、有序列表和自定义列表；表单重点讲解了form元素、input标签、不同类型的input以及表单的其他元素如select、textarea等。
文章目录
表格
可以对数据进行格式化，使数据显得更加清晰。
表格的基本结构
构成表格的三个基本要素
-
table：表格的范围，外框；用来定义表格。表格的其它元素包含在table标签里面。
-
tr：表格的行。
-
td：表格的列（单元格）。
-
th元素：为表格添加标题行。th元素用来定义表格的标题单元格，它是tr元素的子元素，必须放在tr标签里面。tr元素的内容会自动居中对齐并加粗文字。
表格的属性
-
table的属性
- border表格线
- bordercolor 表格线的颜色
- cellspacing ：外边距。单元格之间的距离。
- cellpadding：内边距。属性用来设置表格单元格填充(内容到边框的距离)。
- width 表格的宽度
- height 表格的高度
- align: 水平对齐方式: left: 左对齐；center: 居中对齐；right: 右对齐
- background : 属性用来设置表格的背景图片。将表格填满为止，可以多次，多余部分不要。
- bgcolor : 设置表格的背景颜色
-
td属性： valign: 垂直对齐方式 top : 顶端对齐；middle: 居中对齐；bottom : 底端对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="20" cellspacing="50" cellpadding="50">
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>
表格高度=border*2+（行数+1）*cellspacing+行数*2*cellpadding+内容高度
表格宽度=border*2+（列数+1）*cellspacing+列数*2*cellpadding+内容宽度
总结：表格的宽高由边框、内边距、外边距、内容四部分组成。
快捷键：建立3行3列的表格
table>tr*3>td*3 Tab键
跨行与跨列
注意：
1、跨行和跨列都是写在td标签上的
2、确定好多少行和多少列之后，再写跨行跨列
跨行：rowspan ，纵向合并单元格
跨列：colspan，横向合并单元格
实际上跨行和跨列的写法需要能分析出每一行有几个单元格,然后每个单元格是跨行还是跨列
案例：
分析：这是一个3行3列的表格
其中1,2跨列，8,9跨列；3,6跨行，4,7跨行。我们需要让1，3，4，8的位置占两个单元格。
<table border="1" cellspacing="0" cellpadding="0" align="center" height="300" width="300">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
在1的位置加colspan = “2”，将单元格2删除。
<tr>
<td colspan="2">1</td>
<td>3</td>
</tr>
最低0.47元/天 解锁文章
扫一扫
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
