3.5、表格标签,5 表格标签详解

马肤

温馨提示:这篇文章已超过890天没有更新,请注意相关的内容是否还可用!

摘要:本文提到的表格标签是用于创建网页表格的重要HTML元素。通过使用表格标签,可以组织和展示数据,使网页内容更加清晰易读。表格标签包括表头、表格行、表格列等不同的部分,通过合理的布局和样式设置,可以实现各种复杂的表格效果。在网络开发中,熟练掌握表格标签的使用是构建优秀网页的重要一环。

前言

今天讲的是html的表格标签,可能有的朋友会问为什么讲的这一点零散的东西,这些有什么用,我想说,其实我们把这些学习的整合在一块他就实现了一套精美的网页。后面我也会通过实战演练来告诉大家怎么整合怎么优化。离我们的编程梦越来越近了,希望大家坚持一下,学习不易我懂,但是学到了就是金钱。


3.5、表格标签,5 表格标签详解 第1张



正文


这一课我们主要使用的代码是<table>、<tr>、<td> 及 <th> 四个标签

下面我来详细介绍一下这几个代码


  • <table> 表示表格,表格的所有内容需要写在 <table> 和 </table> 之间。

  • <tr> 是 table row 的简称,表示表格的行。表格中有多少个 <tr> 标签就表示有多少行数据。

  • <td> 是 table datacell 的简称,表示表格的单元格,这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。

  • <th> 是 table heading 的简称,表示表格的表头。<th> 其实是 <td> 单元格的一种变体,本质上还是一种单元格。<th> 一般位于第一行,充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。

演示代码

<table border="1">

   <tr>

     <th>名称</th>

     <th>官网</th>

     <th>性质</th>

   </tr>

   <tr>

     <td>VPS857</td>

     <td>https://www.857vps.cn/</td>

     <td> HTML</td>

   </tr>

    <tr>

     <td>C语言</td>

     <td>http://www.baidu.com/</td>

     <td>搜索</td>

     </tr>

   <tr>

      <td>当当</td>

     <td>http://www.dangdang.com/</td>

      <td>图书</td>

    </tr>

</table>


效果图




3.5、表格标签,5 表格标签详解 第2张




但是这个表格我们看起来丑丑的对吧,那么多边宽,所以我们得优化这个代码使得这个边框边自然,变好看对不对。好了,我们现在开始优化

我这边打算增加以下表格边框属性,利用我们所学的css中的border-collapse 属性来设置表格的边框。


<table border="1" style="border-collapse: collapse;">         我们所添加的代码就是这个


   <tr>

     <th>名称</th>

     <th>官网</th>

     <th>性质</th>

   </tr>

   <tr>

     <td>VPS857</td>

     <td>https://www.857vps.cn/</td>

     <td> HTML</td>

   </tr>

    <tr>

     <td>C语言</td>

     <td>http://www.baidu.com/</td>

     <td>搜索</td>

     </tr>

   <tr>

      <td>当当</td>

     <td>http://www.dangdang.com/</td>

      <td>图书</td>

    </tr>

</table>




效果图



3.5、表格标签,5 表格标签详解 第3张



往后讲,作为一个表格,必须要有的就是标题吧,不然别人怎么会知道你写的这个标题的内容是什么呢·所以我们要加上标题标签。

标题标签我们之前也已经讲过就是 <caption>标签


<!DOCTYPE html>

<table border="1" style="border-collapse: collapse;">

<caption>这是表格的标题</caption>      这个就是我们要加的代码

   <tr>

     <th>名称</th>

     <th>官网</th>

     <th>性质</th>

   </tr>

   <tr>

     <td>VPS857</td>

     <td>https://www.857vps.cn/</td>

     <td> HTML</td>

   </tr>

    <tr>

     <td>C语言</td>

     <td>http://www.baidu.com/</td>

     <td>搜索</td>

     </tr>

   <tr>

      <td>当当</td>

     <td>http://www.dangdang.com/</td>

      <td>图书</td>

    </tr>

</table>


效果图


3.5、表格标签,5 表格标签详解 第4张


今天就先讲到这里,现在是北京时间的22:30世界杯开幕式即将开始我先去看开幕式啦。后面我会讲合并单元格等一系列的内容


0
收藏0
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

  • 中药颗粒剂怎么备案(中药颗粒备案相关法律规定),中药颗粒剂的备案流程与法律规定详解,中药颗粒剂备案详解,备案流程与法律规定全知道,中药颗粒剂备案详解,流程、法律规定及注意事项全知道,中药颗粒剂备案详解,流程、法律规定及注意事项全知道指南,中药颗粒剂备案详解,流程、法律规定及注意事项指南,中药颗粒剂备案详解,流程、法律规定及注意事项指南全知道,中药颗粒剂备案详解,流程、法律规定及注意事项指南全知道,中药颗粒剂备案详解,流程、法律规定及注意事项指南全知道
  • 硕一主机怎么开机(硕一电脑开机进bios),硕一主机开机步骤及进入BIOS方法,硕一主机开机步骤及进入BIOS方法详解,硕一主机开机步骤及进入BIOS详解,从开机到BIOS操作指南,硕一主机开机步骤及BIOS进入详解,从启动到操作指南,硕一主机开机步骤及进入BIOS详解,操作指南从启动到操作一步到位,硕一主机开机步骤及进入BIOS详解,操作指南从启动到操作一步到位。,硕一主机开机步骤及进入BIOS详解,操作指南从启动到操作一步到位
  • 速腾舒适智联版主机怎么拆(速腾旗舰主机),速腾舒适智联版主机拆卸指南,旗舰主机拆解步骤揭秘,速腾舒适智联版主机拆卸指南,旗舰主机拆解步骤揭秘,速腾舒适智联版主机拆卸指南,旗舰主机拆解步骤与揭秘,速腾舒适智联版主机拆卸全指南,旗舰主机拆解步骤与揭秘揭秘,速腾舒适智联版主机拆卸全攻略,旗舰主机拆解步骤与揭秘揭秘,速腾舒适智联版主机拆卸全攻略,旗舰主机拆解步骤与揭秘大揭秘,速腾舒适智联版主机拆卸全攻略,旗舰主机拆解步骤与揭秘终极版,速腾舒适智联版主机拆卸全攻略,旗舰主机拆解步骤与揭秘终极指南
  • 备案车辆手机号码怎么改(备案车辆手机号码怎么改绑),备案车辆手机号码修改指南,如何成功改绑车辆备案手机号码?,备案车辆手机号码改绑指南,如何成功修改车辆备案手机号码?,备案车辆手机号码改绑全攻略,轻松指导修改车辆备案手机号,备案车辆手机号码改绑全攻略,轻松指导修改车辆备案手机号,备案车辆手机号码改绑全攻略,轻松指导修改车辆备案手机号码
  • 电脑主机开关旁边的灯不亮了怎么办(电脑主机开关旁边的灯不亮了怎么办呀),电脑主机开关旁指示灯不亮,解决方法与排查指南,电脑主机开关旁指示灯不亮怎么办?排查与解决指南,电脑主机开关旁指示灯不亮,排查与解决指南,电脑主机开关旁指示灯不亮,排查与解决指南
  • 域名解析正常但无法访问此网站怎么回事(域名解析成功但是打不开网站),域名解析正常却无法访问网站,原因解析与解决方案,域名解析正常却无法访问网站,原因解析、解决方案与操作指南,域名解析正常却无法访问网站,原因解析、解决方案与操作指南,域名解析正常却无法访问网站,原因解析、解决方案与操作指南全攻略,域名解析正常却无法访问网站,原因解析、解决方案与操作指南大全,域名解析正常却无法访问网站,原因解析、解决方案与操作指南全攻略(附操作指南大全)
  • 公租房备案编号怎么获得(公租房备案编号怎么获得信息),公租房备案编号获取方法及信息指南,公租房备案编号获取指南,获取方法与信息全解析,公租房备案编号获取指南,获取方法与信息全解析
  • 域名或者服务器被攻击怎么处理(域名或者服务器被攻击怎么处理的),域名或服务器遭受攻击的处理方法与策略,域名或服务器遭受攻击的处理方法与策略,应对策略与步骤详解,域名或服务器遭受攻击的处理方法与策略详解,应对策略与步骤全面解析
  • 发表评论

    快捷回复:表情:
    评论列表 (暂无评论,233人围观)

    还没有评论,来说两句吧...

    目录[+]

    取消
    微信二维码
    微信二维码
    支付宝二维码