来这里学习HTML表格，有源码也有知识点介绍。

最新推荐文章于 2024-05-30 19:41:18 发布

北溟南风起

最新推荐文章于 2024-05-30 19:41:18 发布

阅读量265

点赞数 2

本文链接：https://blog.csdn.net/QQQZSJ/article/details/104588602

版权

HTML 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

HTML表格介绍

HTML表格常用元素

HTML表格由<table>标签定义。

一个HTML表格由<table>,搭配使用<tr>、<th>、<td>。

<tr> 表格行

<th> 表头

<td> 表格单元

下面给出实例

<table border="1"><!--参数1：显示表格外框-->
<tr>
  <th>水果</th>
  <th>蔬菜</th>
  <th>书籍</th>
</tr>
 <tr>
   <td>西瓜</td>
   <td>香菜</td> 
   <td>《四世同堂》</td>
 </tr>
 <tr>
   <td>橘子</td>
   <td>芹菜</td>
   <td>《老人与海》</td>
 </tr>
</table>

HTML表格标签（完整版）

常用的就是上面提到的四种。

下面给出一个相对完整的标签表。

标签	描述
<table>	定义表格
<th>	定义表格的表头（表头单元格）
<tr>	定义表格的行
<td>	定义表格单元（标准单元格）
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

HTML边框属性

border属性：表示是否显示边框。

参数为1：显示边框。且参数1是像素宽度，值越大，边框越宽。

参数为0：不显示边框。

HTML表格表头

<th>标签用于规定表头。

大多数浏览器会把表头显示为粗体居中格式。

下面给出一个实例：

<table border="1">
<tr>
   <th>蔬菜</th>
   <th>水果</th>
</tr>
<tr>
  <td>西红柿</td>
  <td>苹果</td>
</tr>
</table>

HTML合并单元格

合并单元格：又名跨行跨列。

rowspan:横跨的行数。rowspan=9 横跨9行。

colspan:横跨的列数。colspan=8 横跨8列。

比如，实现以下功能：

<table border="1">
<tr>
<td>姓名：</td>
<td>夏尔哈</td>
</tr>
<tr>
<td rowspan="2">电话：</td>
<td>666 777 888</td>
</tr>
<tr>
<td>666 777 889</td>
</tr>

</table>