html表格介绍

  本章是在 html语言介绍后继续介绍html语言中的表格。
一、HTML 表格介绍

HTML 表格是由 <table> 标签定义的，用于在网页中以行和列的形式展示数据。表格由表头（<th> 标签）和单元格（<td> 标签）组成，可以包含多行多列的数据内容。

二、HTML 表格的作用

1. 数据展示
   • 可以清晰地呈现结构化的数据，如统计信息、产品列表、课程安排等。使数据更加直观，便于用户快速浏览和理解。
2. 布局辅助
   • 在网页布局中，可作为一种布局方式，将页面内容划分成不同的区域，实现较为复杂的页面结构设计。

三、HTML 表格的特点

1. 结构化呈现
   • 以行和列的形式组织数据，具有明确的结构，易于理解和分析数据之间的关系。
2. 可定制性强
   • 可以通过 CSS 样式对表格的外观进行高度定制，包括边框、颜色、字体等，以满足不同的设计需求。
3. 兼容性好
   • 几乎所有的浏览器都支持 HTML 表格，具有广泛的兼容性。

四、HTML 表格的应用场景

1. 数据报表
   • 企业的财务报表、销售数据报表等，使用表格可以将大量的数据以整齐的形式展示出来，方便管理人员进行数据分析和决策。
2. 商品列表
   • 电商网站的商品列表通常以表格形式展示商品的图片、名称、价格、规格等信息，方便用户比较和选择商品。
3. 课程表
   • 学校或培训机构的课程表可以用表格呈现，清晰地展示课程的时间、地点、授课教师等信息。
4. 通讯录
   • 将联系人信息以表格形式展示，包括姓名、电话、邮箱等，便于查找和管理联系人。

标签名	作用
table	整体(table)
tr	表格每行(table row)，包裹td
td	表格单元格(table data)，包裹内容
border	边距
cellspacing	间距
width	宽度
height	高度
caption	表格标题(标题加粗)
th	头单元格(tabel head)
以下是边框示例：
默认

<table>
    <tr>
      <td>姓名</td>
      <td>性别</td>
      <td>年龄</td>
    </tr>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>22</td>
    </tr>
</table>

效果：

<table border="1">
    <tr>
      <td>姓名</td>
      <td>性别</td>
      <td>年龄</td>
    </tr>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>22</td>
    </tr>
</table>

效果：

<table border="1" cellspacing=0>
 <tr>
   <td>姓名</td>
   <td>性别</td>
   <td>年龄</td>
 </tr>
 <tr>
   <td>张三</td>
   <td>男</td>
   <td>22</td>
 </tr>
</table>

效果：
以下是横竖标题示例：

横标题

<table border="1">
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>22</td>
    </tr>
 </table>

效果：

竖标题

<table border="1">
    <tr>
      <th>姓名</th>
	  <td>张三</td>
	</tr>
    <tr>
      <th>性别</th>
	  <td>男</td>    
    </tr>
    <tr>
      <th>年龄</th>
	  <td>22</td> 
    </tr>

效果：

表头标题

以下是表头标题示例：

使用caption

<table border="1">
    <caption>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </caption>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>22</td>
    </tr>
 </table>

效果：

使用tr

<table border="1">
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>22</td>
    </tr>
 </table>

效果：

标题

table border="1">
  <caption>
学生成绩单
</caption>
  <caption>
    <th>姓名</th>
    <th>成绩</th>
    <th>评语</th>
  </caption>
  <tr>
    <td>小哥哥</td>
    <td>100分</td>
    <td>真帅气</td>
  </tr>
  <tr>
    <td>小姐姐</td>
    <td>50分</td>
    <td>真漂亮</td>
  </tr>
 </table>

效果：

合并单元格

场景：将水平或垂直多个单元格合并成一个单元格
特点：通过左上原则，确定保留谁删除谁
①上下合并——>只保留最上的，删除其他(手动删除)
②左右合并——>只保留最左的，删除其他(手动删除)
注意：只有同一个结构标签的单元格才能合并，不能开结构标签合并
（不能跨thead、tbody、tfoot）

属性	作用	效果
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并
以下是合并示例：

跨行合并

<table border="1">
<caption>学生成绩单</caption>
  <caption>
    <th>姓名</th>
    <th>成绩</th>
    <th>评语</th>
  </caption>
  <tr>
    <td rowspan="2">小哥哥</td>
    <td>100分</td>
    <td>真帅气</td>
  </tr>
  <tr>
    <td>50分</td>
    <td>真漂亮</td>
  </tr>
 </table>

效果：

跨列合并

<table border="1">
<caption>学生成绩单</caption>
  <caption>
      <th>姓名</th>
      <th>成绩</th>
      <th>评语</th>
   </caption>
   <tr>
      <td>小哥哥</td>
      <td>100分</td>
      <td>真帅气</td>
   </tr>
   <tr>
      <td>小姐姐</td>
      <td colspan="2">50分</td>
   </tr>
</table>

效果：

合并边框

table {
   border-collapse: collapse;
}
table,
th,
td {
   border: 1px solid black;
}