首页 前端知识 HTML小白入门学习-表格标签

HTML小白入门学习-表格标签

2024-08-10 22:08:19 前端知识 前端哥 57 853 我要收藏

一、前言

话说上文,我们对HTML的表单类标签进行简单的学习和认识, 分别是<form>、<input>、<textarea>、<label>、<select>和<button>这几个标签。

与表单标签有一字之别的表格标签,就是本文的主角。本篇文章将带着大家认识HTML标签中较为常用的表格标签。table标签用来表示一个表格,表格的组成我们有很多角度可以剖析,比如一个表格是由行和列组成的,比如一个表格是由表头和表主体组成的,再比如一个表格是由一个个单元格组成的。

不同角度对表格的剖析,都会对应到table标签里面包裹的子元素,下面我们就详细来介绍一下。

二、table标签

<table>标签用来表示一个表格,它是包裹在最外层的标识标签,告诉浏览器这是一个表格,标签代码示例:

<table></table>

当然,只有这个<table>标签是不够的,一般的,表格的具体内容展示还需要用到下面几个标签,分别是:<tr>、<th>、<td>。

1、<tr></tr>:表示表格中的行,有多少个<tr>标签,就有多少行。

2、<th></th>:表示表格的表头内容。

3、<td></td>:表示表格的单元格。

一般的,表头中<th>有多少个,对应的下面每一行的<td>就有多少个,如果<th>和<td>数量不相等,需要利用colspan或者rowspan属性进行合并配置,这样就可以实现单元格拆分或者合并效果了,话不多说,我们直接上代码:

(1)中规中矩类型:

<table border="3">

  <tr>

   <th>日期</th>

    <th>吃什么</th>

  </tr>

  <tr>

    <td>星期一</td>

    <td>炭烤牛蛙</td>

  </tr>

  <tr>

    <td>星期二</td>

    <td>酸菜鱼</td>

  </tr>

</table>

看看运行效果:
在这里插入图片描述

(2)小试牛刀类型:

<table border="3">

  <tr>

    <th>人员</th>

    <th colspan="2">称呼</th>

  </tr>

  <tr>

    <td>张楚岚</td>

    <td>不摇碧莲</td>

    <td>阳雷传人</td>

  </tr>

</table>

看看运行效果:
在这里插入图片描述

三、table标签属性

<table>标签的属性有挺多的,常用的几个整理如下:

属性作用
border设置表格框线的宽度(px)
rowspan设置单元格要合并的行数
colspan设置单元格要合并的列数
cellpadding设置单元格边框与单元格内容之间的距离(px)
cellspacing设置单元格与单元格之间的距离(px)
width设置整个表格的总体宽度
summary设置表格的摘要,不显示

四、其他元素

<table>标签里面可以放的元素除了<tr>、<th>、<td>这三个外,其实还有一些常用的元素,分别是:<caption>、<colgroup>、<thead>、<tfoot>、<tbody>。

1、<caption>标签:该标签是用来定义表格标题的,而且每个表格只能有一个标题,比如人员请假情况统计表,用来说明表格的主题。

代码示例:

<table border="3">

  <caption>炁体源流值班表</caption>

  <tr>

    <th>月份</th>

    <th>值班人员</th>

  </tr>

  <tr>

    <td>6月</td>

   <td>冯宝宝</td>

  </tr>

  <tr>

    <td>7月</td>

    <td>张楚岚</td>

  </tr>

</table>

看看运行效果:
在这里插入图片描述

2、<thead>标签、<tbody>标签、<tfoot>标签:这三个标签一般都是组队出现的,分别用来表示表格的页眉、正文和页脚。作用就是当你的表格内容很多的时候,有时候甚至跨页,如果你设置了这几个标签,那么在滚动表格正文时,页眉和页脚可以独立显示。而且要打印跨页表格时,设置了的页眉和页脚也会在每页的顶部和底部打印出来,保证表格的完整性。

看看代码:

<table border="3">

  <thead>

    <tr>

      <th>人员</th>

      <th>年纪(岁)</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>冯宝宝</td>

      <td>500</td>

    </tr>

    <tr>

      <td>张楚岚</td>

      <td>19</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <td>合计</td>

      <td>519</td>

    </tr>

  </tfoot>

</table>

3、<colgroup>标签:这个标签可以给表格的列进行分组,然后按照不同的分组进行不用的样式配置。它里面会放<col>标签,一般的一个表格有多少列,里面就可以放多少个<col>标签,每个<col>标签对应一列。

不过,有同学会问,那如果有很多列,不就要写好多个<col>标签,那不是很麻烦?其实<col>标签有个属性叫“span”,这个属性可以帮助我们简化写法,你可以设置span的值,这个值就是代表对应的列数。比如一个表格有三列,我想把前面两列分为一组,把这两列背景颜色设置为紫色,然后把最后一列背景颜色设置为粉红色,则对应的代码示例如下:

<table border="3">

  <colgroup>

    <col span="2" style="background-color:purple">

    <col style="background-color:pink">

  </colgroup>

  <tr>

    <th>人员</th>

    <th>身高(cm)</th>

    <th>体重(kg)</th>

  </tr>

  <tr>

    <td>冯宝宝</td>

    <td>170</td>

    <td>45</td>

  </tr>

  <tr>

    <td>张楚岚</td>

    <td>176</td>

    <td>65</td>

  </tr>

</table>

看看效果:
在这里插入图片描述

五、小结

本篇为大家简单介绍了HTML标签中的table标签,喜欢本文的话,可以给博主点个小心心哦。博主在此,提前祝大家,新年快乐!

  • 欢迎关注我的公众号,不仅为你推荐最新的博文,还有更多惊喜和资源在等着你!一起学习共同进步!
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15245.html
标签
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!