一、表格的基础操作
代码：
<!DOCTYPE html><!-- -->
<html>
<head>
<title>表格操作</title>
</head>
<body>
<!-- html表格标签：<table></table>表格；<tr></tr>行；<td></td>单元格。单元格标签在行标签里-->
<!-- 创建一个两行三列表格 -->
<table border="1">
<tr>
<td>2021年</td>
<td>2020年</td>
<td>2019年</td>
</tr>
<tr>
<td>5000</td>
<td>8000</td>
<td>10000</td>
</tr>
</table>
<hr/>
<!-- 表格操作：添加、删除行与列 -->
<!-- <th></th>表头标签 -->
<!-- 表格划分为三部分：thead表头、tbody主体、tfoot脚注（三个标签同时出现）不影响布局-->
<table border="1" >
<caption>前端工程师平均工资</caption>
<thead>
<tr>
<th>城市</th>
<th>2021年</th>
<th>2020年</th>
<th>2019年</th>
<th>2021年</th>
</tr>
<tr>
<th>城市</th>
<th>上半年</th>
<th>下半年</th>
<th>2019年</th>
<th>2021年</th>
</tr>
</thead>
<tbody>
<tr>
<td>北京</td>
<td>7000</td>
<td>8000</td>
<td>10000</td>
<td>9000</td>
</tr>
<tr>
<td>上海</td>
<td>7000</td>
<td>8000</td>
<td>10000</td>
<td>9000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合计</td>
<td>14000</td>
<td>16000</td>
<td>20000</td>
<td>18000</td>
</tr>
</tfoot>
</table>
<hr/>
<!-- <table>表格属性：width表格的宽度；align表格相对周围的对齐方式；border表格边框的宽度；bgcolor表格的背景颜色；cellpadding单元边沿与其内容之间的空白；cellspacing单元格之间的空白；frame规定外边框的那个部分是可见的；rules规定内边框的那个部分是可见的。-->
<table border="6" width="400px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" >
<caption>前端工程师平均工资</caption>
<thead>
<!-- <tr>标签属性：align行内容的水平对齐；valign行内容的垂直对齐；bgcolor行的背景颜色 -->
<!--跨列属性colspan-->
<!--跨列属性rowspan-->
<tr bgcolor="#d8e4bc">
<th rowspan="2">城市</th>
<th colspan="2">2021年</th>
<th rowspan="2">2019年</th>
<th rowspan="2">2021年</th>
</tr>
<tr bgcolor="#d8e4bc">
<th>上半年</th>
<th>下半年</th>
</tr>
</thead>
<tbody align="center" valign="middle">
<tr>
<td bgcolor="#b8cce4">北京</td>
<td>7000</td>
<td>8000</td>
<td>10000</td>
<td>9000</td>
</tr>
<tr>
<td bgcolor="#b8cce4">上海</td>
<td>7000</td>
<td>8000</td>
<td>10000</td>
<td>9000</td>
</tr>
</tbody>
<tfoot>
<tr align="center" valign="middle">
<td height="30px" bgcolor="#b8cce4">合计</td>
<td>14000</td>
<td>16000</td>
<td>20000</td>
<td>18000</td>
</tr>
</tfoot>
</table>
<!--表格嵌套：必须有完整表格结构，放到<td>标签中-->
<table border="1" cellspacing="0">
<tr>
<td>2021年</td>
<td>2020年</td>
<td>2019年</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td>上半年</td>
<td>下半年</td>
</tr>
<tr>
<td>8000</td>
<td>9000</td>
</tr>
</table>
</td>
<td>8000</td>
<td>10000</td>
</tr>
</table>
</body>
</html>效果图
二、表格布局
注：尽量少的使用表格嵌套、尽量少的使用表格跨行跨列。使用表格进行网页结构布局一般不设置border属性。
代码
<!DOCTYPE html>
<html>
<head>
<title>表格布局</title>
</head>
<body>
<table width="100%" bgcolor="#f2f2f2" >
<tr height="80px" bgcolor="#14191e">
<td>1111111</td>
</tr><!--页头-->
<tr height="10px">
<td></td>
</tr><!--上空行-->
<tr>
<td>
<table align="center" width="1024px" valign="top">
<tr>
<td width="240px" bgcolor="#ffffff">
<table width="100%" >
<tr><td align="center" height="60px">关于我们</td></tr>
<tr><td align="center" height="60px">团队介绍</td></tr>
<tr><td align="center" height="60px">联系我们</td></tr>
<tr><td align="center" height="60px">常见问题</td></tr>
<tr><td align="center" height="60px">意见反馈</td></tr>
<tr><td align="center" height="60px">友情链接</td></tr>
</table>
</td><!--左内容-->
<td width="20px"></td><!--空隙-->
<td width="764px" bgcolor="#ffffff">
<pre>
什么是HTML
HTML是超文本标记语言
超文本指的是超链接
标记指的是标签
是一种用来制作网页的语言
这种语言由一个个的标签组成。
由尖括号包围的关键词，
通常是成对出现的，
标签对中的第一个标签是开始标签，第二个标签是结束标签；
开始和结束标签也被称为开放标签和闭合标签。
也有单独呈现的标签，如
什么是HTML
HTML是超文本标记语言
超文本指的是超链接
标记指的是标签
是一种用来制作网页的语言
这种语言由一个个的标签组成。
由尖括号包围的关键词，
通常是成对出现的，
标签对中的第一个标签是开始标签，第二个标签是结束标签；
开始和结束标签也被称为开放标签和闭合标签。
也有单独呈现的标签，如
什么是HTML
HTML是超文本标记语言
超文本指的是超链接
</pre>
</td><!--右内容-->
</tr>
</table>
</td>
</tr><!--内容-->
<tr height="10px">
<td></td>
</tr><!--下空行-->
<tr height="150px" bgcolor="#14191e">
<td>1111111</td><!--页脚-->
</tr>
</table>
</body>
</html>效果图：
1374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
