表格（上）
HTML 表格一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>表格练习</title>
</head>
<body>
<table>
<!-- tr 是表格的每一行 -->
<tr>
<!-- th 是表格的表头 -->
<th>用户名</th>
<th>UID</th>
</tr>
<tr>
<!-- td 是表格普通的单元格 -->
<td>小甲鱼</td>
<td>9</td>
</tr>
<tr>
<td>不二如是</td>
<td>378930</td>
</tr>
<tr>
<td>冬雪雪冬</td>
<td>326976</td>
</tr>
<tr>
<td>zltzlt</td>
<td>702609</td>
</tr>
</table>
</body>
</html>
显示效果：
可以看到，表格默认是不带边框的。
现在我们通过 css 给表格添加边框（设置 border 属性）：
<!DOCTYPE html>
<html>
<head>
<title>表格练习</title>
<style>
table, th, td {
/*
1px 指定边框宽度为 1 像素
solid 指定边框为实线
red 指定边框的颜色为红色
*/
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<!-- tr 是表格的每一行 -->
<tr>
<!-- th 是表格的表头 -->
<th>用户名</th>
<th>UID</th>
</tr>
<tr>
<!-- td 是表格普通的单元格 -->
<td>小甲鱼</td>
<td>9</td>
</tr>
<tr>
<td>不二如是</td>
<td>378930</td>
</tr>
<tr>
<td>冬雪雪冬</td>
<td>326976</td>
</tr>
<tr>
<td>zltzlt</td>
<td>702609</td>
</tr>
</table>
</body>
</html>
显示效果如下：
可以看到边框为双实线。我们可以设置 css 属性 border-collapse 为 collapse 设置边框为单实线：
<!DOCTYPE html>
<html>
<head>
<title>表格练习</title>
<style>
table, th, td {
/*
1px 指定边框宽度为 1 像素
solid 指定边框为实线
red 指定边框的颜色为红色
*/
border: 1px solid red;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<!-- tr 是表格的每一行 -->
<tr>
<!-- th 是表格的表头 -->
<th>用户名</th>
<th>UID</th>
</tr>
<tr>
<!-- td 是表格普通的单元格 -->
<td>小甲鱼</td>
<td>9</td>
</tr>
<tr>
<td>不二如是</td>
<td>378930</td>
</tr>
<tr>
<td>冬雪雪冬</td>
<td>326976</td>
</tr>
<tr>
<td>zltzlt</td>
<td>702609</td>
</tr>
</table>
</body>
</html>
显示效果：
我们还可以通过 caption 标签设置表格的标题：
<!DOCTYPE html>
<html>
<head>
<title>表格练习</title>
<style>
table, th, td {
/*
1px 指定边框宽度为 1 像素
solid 指定边框为实线
red 指定边框的颜色为红色
*/
border: 1px solid red;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<!-- caption 元素用于指定表格的标题 -->
<caption>鱼 C 论坛</caption>
<!-- tr 是表格的每一行 -->
<tr>
<!-- th 是表格的表头 -->
<th>用户名</th>
<th>UID</th>
</tr>
<tr>
<!-- td 是表格普通的单元格 -->
<td>小甲鱼</td>
<td>9</td>
</tr>
<tr>
<td>不二如是</td>
<td>378930</td>
</tr>
<tr>
<td>冬雪雪冬</td>
<td>326976</td>
</tr>
<tr>
<td>zltzlt</td>
<td>702609</td>
</tr>
</table>
</body>
</html>
显示效果：
表格看上去特别拥挤，我们可以通过设置 css 属性 padding 设置单元格的内边距：
<!DOCTYPE html>
<html>
<head>
<title>表格练习</title>
<style>
table, th, td {
/*
1px 指定边框宽度为 1 像素
solid 指定边框为实线
red 指定边框的颜色为红色
*/
border: 1px solid red;
border-collapse: collapse;
/* 这里设置内边距为 5 像素 */
padding: 5px;
}
</style>
</head>
<body>
<table>
<!-- caption 元素用于指定表格的标题 -->
<caption>鱼 C 论坛</caption>
<!-- tr 是表格的每一行 -->
<tr>
<!-- th 是表格的表头 -->
<th>用户名</th>
<th>UID</th>
</tr>
<tr>
<!-- td 是表格普通的单元格 -->
<td>小甲鱼</td>
<td>9</td>
</tr>
<tr>
<td>不二如是</td>
<td>378930</td>
</tr>
<tr>
<td>冬雪雪冬</td>
<td>326976</td>
</tr>
<tr>
<td>zltzlt</td>
<td>702609</td>
</tr>
</table>
</body>
</html>
显示效果：
这样看上去就好看一些了。
页:
[1]