马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
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>
显示效果：
这样看上去就好看一些了。 | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-1-22 20:57:09
置顶卡
千斤顶
显身卡