表格的主要目的
显示数据 并不适合用来做布局
创建表格
<table width="" border="1">
<tr>
<td>姓名</td>
<td>性别</td>
<td>电话</td>
</tr>
<tr>
<td>小胖</td>
<td>女</td>
<td>5678</td>
</tr>
</table>
结果：
| 姓名 | 性别 | 电话 |
| 小胖 | 女 | 5678 |
表格的属性
<table a = “”>
| 属性 | 描述 | 输入格式 |
|---|---|---|
| border | 边框 默认border=0 无边框 | 像素值 |
| cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值 默认为2 |
| cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值 默认为1 |
| width | 表格宽度 | 像素值 |
| height | 表格高度 | 像素值 |
| align | 设置表格在网页中的水平对齐方式 | left;center;right |
三参为0：一般前三个参数都为0
表头
效果：table head简写 居中加粗 <th>
<table width="" border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>小胖</td>
<td>女</td>
<td>5678</td>
</tr>
</table>
效果：
| 姓名 | 性别 | 电话 |
|---|---|---|
| 小胖 | 女 | 5678 |
<table width="" border="">
<caption>个人信息表</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>小胖</td>
<td>女</td>
<td>5678</td>
</tr>
</table>
效果：
| 姓名 | 性别 | 电话 |
|---|---|---|
| 小胖 | 女 | 5678 |
跨行合并:rowspan 跨列合并:colspan
跨列合并的步骤：
- 找到要合并的首个单元格， 添加colspan属性 表示这个单元格占几列
- 删除下一个单元格
跨行合并的步骤：
- 找到要合并的首个单元格，添加rowspan属性 表示这个单元格占几行
- 删除同列下一行单元格
跨列合并代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table width="500" border="1" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>小胖</td>
<td colspan="2">女</td
</tr>
</table>
</body>
</html>
结果：
| 姓名 | 性别 | 电话 |
|---|---|---|
| 小胖 | 女 | |
跨行合并的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>性别</th>
<th rowspan="2">电话</th>
</tr>
<tr>
<td>小胖</td>
<td>女</td>
</tr>
</table>
</body>
</html>
结果：
| 姓名 | 性别 | 电话 |
|---|---|---|
| 小胖 | 女 |
1140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
