<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML表格及表格系列标签的用法</title>
</head>
<body>
<table border="2px" cellspacing="10px" width="500px" height="500px" align="center">
<caption>这是表格头</caption>
<th>这是单元格头1</th><th>这是单元格头2</th><th>这是单元格头3</th>
<tr align="center" valign="center"><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr>
<tr align="left" valign="top"><td>第二行第一列</td><td align="right" valign="bottom">第二行第二列</td><td>第二行第三列</td></tr>
<tr align="right" valign="bottom"><td>第三行第一列</td><td>第三行第二列</td><td rowspan=2>第三行第三列</td></tr>
<tr><td colspan=2>第四行第一列</td></tr>
</table>
</body>
</html>
如果使用css设置细线边框后的效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML表格及表格系列标签的用法</title>
</head>
<body>
<table border="2px" cellspacing="10px" width="500px" height="500px" align="center">
<caption>这是表格头</caption>
<th>这是单元格头1</th><th>这是单元格头2</th><th>这是单元格头3</th>
<tr align="center" valign="center"><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr>
<tr align="left" valign="top"><td>第二行第一列</td><td align="right" valign="bottom">第二行第二列</td><td>第二行第三列</td></tr>
<tr align="right" valign="bottom"><td>第三行第一列</td><td>第三行第二列</td><td rowspan=2>第三行第三列</td></tr>
<tr><td colspan=2>第四行第一列</td></tr>
</table>
</body>
<style>
table{
border-collapse: collapse;
border:1;
}
</style>
</html>
表格常常用来做页面布局，是一个非常重要的知识点，请大家把以上代码复制出去认真理解一下。
以下对HTML中的表格标签元素做一下解释：
table
属性
border边框
cellspacing单元格间距
cellpadding单元格内部的填充
width设置表格宽度
height设置表格高度
align表格在网页中的对齐方式，取值：left/center/right
caption 表格标题
th 表头
tr 行
align设置当前这一行中所有单元格的水平对齐方式
valign设置当前这一行中所有单元格的垂直对齐方式
td 列
align设置当前这一列中所有单元格的水平对齐方式
valign设置当前这一列中所有单元格的垂直对齐方式
合并单元格
左右合并，在左边的td上添加colspan=数量，然后删除右边的td
上下合并，在上面这个td中设置rowspan=数量，然后删除下边的td
单线边框表格语法：
给table加style="border-collapse: collapse;" border="1"
或
<style>
table{
border-collapse: collapse;
border:1;
}
</style>
|
窥视卡
雷达卡
发表于 2023-1-30 22:34:56
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-15 11:46:11
