HTML基础学习——表格

一.表格的基本使用

1.<table>定义表格，<tr>定义表格的行,<td>定义表格单元

• <table>
  <table>标签定义 HTML 表格。
  简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
  更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
• <tr>
  <tr> 标签定义 HTML 表格中的行。
  tr 元素包含一个或多个 th 或 td 元素。
• <th>
  定义表格内的表头单元格。
  th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。
• <td>
  <td> 标签定义 HTML 表格中的标准单元格。
  td 元素中的文本一般显示为正常字体且左对齐。
• HTML 表单中有两种类型的单元格：
  表头单元格 - 包含表头信息（由 th 元素创建）
  标准单元格 - 包含数据（由 td 元素创建）

代码示例：

代码示例
结果

• ps:<table>标签是默认不显示单元格表格的，如果想要显示表格则添加以下代码：

  
  代码如下
  

  border在HTML5中的意思是是否显示单元格的标签，如果需要显示单元格则将它的值设为1，不需要显示的时候不可不用写border标签。

  
  结果出现边框

• 如果将<td>里面的值设为空，单元格依旧存在。

  
  代码示例
  结果如下

• 如果某一行少一列的时候：

  
  代码示例
  结果如上
• 注意：当<td>为空和缺少<td>是不同的结果！！！

2.定义表格表头<th>

代码如下：

代码如下
结果如下

3.单元格的跨行和跨列

• <td>,<th>标签的rowspan和colspan属性
  rowspan 属性规定单元格可横跨的行数。
  colspan 属性规定单元格可横跨的列数。
  示例代码：

  
  代码如下
  结果如下

• 因为组别有相同的，可以合并一下

  
  代码如下
  结果如下
  代码如下
  结果如下

• 因为基本信息和联系方式有重复的，可以合并一下

  
  代码如下
  结果如下

4.其他的表格标签

其他表格标签

（此文章仅作为个人学习笔记使用，如有错误欢迎指正~）