HTML—表格、列表—2

最新推荐文章于 2024-07-15 22:47:50 发布

kkkk_1112

最新推荐文章于 2024-07-15 22:47:50 发布

阅读量331

点赞数

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

本文链接：https://blog.csdn.net/kkkk_1112/article/details/108733197

版权

本文详细介绍了HTML中的表格、列表和表单元素。表格包括创建、属性、表头、标题和单元格合并；列表分为无序、有序和自定义列表；表单讲解了主要控件如input、textarea、select等，以及form表单域的作用和属性。

摘要由CSDN通过智能技术生成

html

表格：展示数据，使数据更整齐

列表：用来布局，使页面布局更整齐规范

表单：用来收集用户信息

1. 表格

（1）创建表格

表格标签

<table></table>

表格中的行标签`

<tr></tr>

单元格标签

<td></td>

td也就是table data的缩写。

表格中没有列的概念。

（2）表格属性

<table   border = " "   width = " ">

border 边框线，默认 border = 0

cellspacing 设置单元格与单元格边框之间的空白间距，默认为2像素

cellpadding 设置单元格内容与单元格边框之间的空白间距，默认为1像素

width 表宽度

height 表长度

align 设置表格在网页中的水平对齐方式，有left(左对齐)、center(居中对齐)、right(右对齐)

(3) 表头 th

th也是一个单元格，和td不同的是，th里面的文字居中加粗，一般在第一行或者第一列。

代码 :

 <th>内容</th>

(4)表格标题 caption

代码：

<caption>标题名</caption>

为了能和表格一直在一起，一般在

之后定义

(5)合并单元格

跨行合并：rowspan = “合并单元格的个数”

跨列合并：colspan = “合并单元格的个数”

合并单元格的顺序：先上后下，先左后右

(6)合并单元格三部曲：

先确定是跨行合并还是跨列合并

根据先上后下、先左后右的原则周到目标单元格，然后写上合并方式和要合并单元格数量
例如：

<td`colspan = "3"></td>

最后，不要忘记删除多余的单元格

举例代码：

<!DOCTYPE html>
<html>
<head>
	<title>刘德华</title>
</head>
<body>
	<table border="1" cellspacing="0" align="center" width="600">
		<tr>
			<td>刘德华</td>
			<td>男</td>
			<td>18</td>
			<td rowspan="2">照片</td>
		</tr>
		<tr>
			<td>身高 180</td>
			<td>汉族</td>