• 技术文章 >web前端 >前端问答

    html表格的作用是什么

    青灯夜游青灯夜游2022-09-23 16:03:58原创183

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

    大前端零基础入门到就业:进入学习

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

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

    1.表格的主要作用

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

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

    例如:

    瓜类单价数目金额
    西瓜1210120
    哈密瓜14570
    香瓜815120

    2.表格的基本语法

    <table>
    	<tr>
    		<td>单元内得文字</td>
    		...
    	</tr>
    </table>

    表头单元格标签

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

    <th>标签表示HTML表格的表头部分(table head的缩写)。

    总结:表头单元格也是单元格,常用于表格的第一行,突出重要性,表头单元格里面的文字会加粗居中显示。

    表格的结构标签

    使用场景:因为表格可能很长,为了更好的表示表格的予以语义,可以将表格分成表格头部和表格的主体两大部分。

    在表格标签中,分别使用:<thead>标签 表格的头部区域、<tbody>标签的主体区域。这样可以更好的分清表格结构。

    例子:

    <table border="1">
         <thead>  
       		  <tr><th>姓名</th>  <th>性别</th> <th> 年龄 </th></tr> 
         <thead>
         <tbody>
    		  <tr><td>刘德华</td>  <td>男</td> <td> 56 </td></tr>
           	  <tr><td>张学友</td>  <td>男</td> <td> 58 </td></tr>
              <tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr>
              <tr><td>黎明</td>  <td>男</td> <td> 57 </td></tr>
              </tbody>
        </table>

    1.png

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

    目的有两个:

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

    案例:小说排行榜

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

    案例分析:

    后书写表格属性属性

    具体代码如下:

     <table align="center" width="500" height="249" border="1" cellspacing="0">
            <thead>
                <tr>
                    <th>排名</th>
                    <th>关键词</th>
                    <th>封面</th>
                </tr>
            </thead>
    
            <tbody>
                <tr>
                    <td>1</td>
                    <td>靠近你会掉刺</td>
                    <td><img src="images/1.jpg"></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>魔尊要抱抱</td>
                    <td><img src="images/2.jpg"></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>触碰的旋律</td>
                    <td><img src="images/3.jpg"></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>穿越成反派要如何活命</td>
                    <td><img src="images/4.jpg"></td>
                </tr>
            </tbody>
        </table>

    合并单元格

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

    合并单元格方式

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

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

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

    合并单元格三部曲:

    例子:

     <table width="500" height="249" border="1" cellspacing="0">
            <tr>
                <td></td>
                <td colspan="2"></td>
               
            </tr>
            <tr>
                <td rowspan="2"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
               
                <td></td>
                <td></td>
            </tr>
        
        </table>

    2.png

    (学习视频分享:web前端

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html 表格
    上一篇:怎么让html标签不可编辑 下一篇:html单行注释符有哪些
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• script标签一般写在html的什么位置• html文件的扩展名是什么?文件的文件类型是什么?• html5中不允许写结束符的标签有哪些• html和css算编程语言吗• 在html中css的分为几大类
    1/1

    PHP中文网