登录  /  注册

html表格的作用是什么

青灯夜游
发布: 2022-09-23 16:03:58
原创
3659人浏览过

html表格的作用是展示数据。表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好;特别是后台展示数据的时候,能够熟练运用表格就显得很重要;一个清爽简约的表格能够把繁杂的数据表现得很有条理。

html表格的作用是什么

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

表格是实际开发中非常常用的标签。

1.表格的主要作用

表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

总结:表格不是用来布局页面得,而是用来展示数据的。

例如:

瓜类 单价 数目 金额
西瓜 12 10 120
哈密瓜 14 5 70
香瓜 8 15 120

2.表格的基本语法

登录后复制
登录后复制
...
单元内得文字
  • <table></table>是用于定义表格的标签。

  • <tr></tr>标签用于定义表格中的行,必须嵌套在<table></table>标签中。

  • <td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。

  • 字母 td 指表格数据(table data),即单元格的内容。

表头单元格标签

一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗剧中显示。

<th>标签表示HTML表格的表头部分(table head的缩写)。<p><span style="color:red">总结</span>:表头单元格也是单元格,常用于表格的第一行,突出重要性,表头单元格里面的文字会加粗居中显示。</p> <h3><strong>表格的结构标签</strong></h3> <p><span style="color:red">使用场景</span>:因为表格可能很长,为了更好的表示表格的予以语义,可以将表格分成表格头部和表格的主体两大部分。</p> <p>在表格标签中,分别使用:<code><thead>标签 表格的头部区域、<code><tbody>标签的主体区域。这样可以更好的分清表格结构。<ul style="list-style-type: disc;"> <li><p><code><thead></thead>:用于定义表格的头部。内部必须拥有标签。一般是位于第一行。

  • :用于定义表格的主体,主要用于放数据本体。

  • 以上标签都是放在<table></table>标签中。

  • 例子:

    登录后复制
    登录后复制
                                                                                                  
    姓名性别 年龄 
    刘德华 56 
    张学友 58 
    郭富城 51 
    黎明 57 

    1.png

    表格属性,这部分属性我们实际开发中不常用,后面通过CSS来设置。

    目的有两个:

    • 记住CSS这些单词,后面CSS会使用。

    • 直观感受表格的外观形态。

    属性名 属性值 描述
    align left 、center、right 规定表格相对周围元素的对齐方式。
    border 1或"" 规定表格单元是否拥有边框,默认为"",表示没有边框
    cellpadding 像素值 规定单元边沿与其内容之间的空白,默认 1 像素
    cellspacing 像素值 规定单元表格之间的空白,默认 2 像素。
    width 像素值或百分比 规定表格的宽度

    案例:小说排行榜

    排名 关键词 封面
    1 靠近你会掉刺 在这里插入图片描述
    2 魔尊要抱抱 在这里插入图片描述
    3 触碰的旋律 在这里插入图片描述
    4 穿越成反派要如何活命 在这里插入图片描述

    案例分析:

    • 第一行里面是 th 表头单元格

    • 第二行开始里面是 td 普通单元格

    • 单元格里面可以放任何元素,文字链接图片等后可以

    后书写表格属性属性

    • 用到宽度高度边框 cellpadding 和 cellspacing

    • 浏览器中对齐 align

    具体代码如下:

     
    登录后复制
    登录后复制
                                                                                                                                                                                                                                                                                                                                                                                                                                             
    排名关键词封面
    1靠近你会掉刺html表格的作用是什么
    2魔尊要抱抱html表格的作用是什么
    3触碰的旋律html表格的作用是什么
    4穿越成反派要如何活命html表格的作用是什么

    合并单元格

    特殊情况下,可以把多格单元格合并为一个单元格。

    合并单元格方式

    跨行合并 rowspan=“合并单元格的个数”。
    跨列合并 colspan=“合并单元格的个数”。

    目标单元格:(写合并代码)

    跨行最上侧单元格为目标单元格,写合并代码
    跨列最左侧单元格为目标单元格,写合并代码

    合并单元格三部曲:

    • 1.先确定是跨行还是跨列合并。

    • 2.找到目标单元格,写合并方式 = 合并的单元格数量
      比如:<td colspan="2"></td>

    • 3.删除多余的单元格。

    例子:

     
    登录后复制
    登录后复制
                         <td></td>             <td></td>                                           <td></td>             <td></td>             <td></td>                                           <td></td>             <td></td>                   

    2.png

    (学习视频分享:web前端

    以上就是html表格的作用是什么的详细内容,更多请关注php中文网其它相关文章!

    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
    相关标签:
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    作者最新文章
    最新问题
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号