HTML5教程

零基础学习WEB前端开发(九)：表格标签

本文主要是介绍零基础学习WEB前端开发(九)：表格标签，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目录

一、表格的作用

二、表格的基本语法

三、表头单元格标签

四、表格的相关属性

五、表格结构标签

六、案例分析 

七、合并单元格

一、表格的作用

表格的作用是为了展示数据，如下图所示（摘选自东方财富网股票频道）：

二、表格的基本语法

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

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

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        
        <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>名次</td> </tr>  
        <tr> <td>小明</td> <td>男</td> <td>18</td> <td>第二名</td> </tr>  
        <tr> <td>小红</td> <td>女</td> <td>17</td> <td>第五名</td> </tr>  
        <tr> <td>小朱</td> <td>男</td> <td>19</td> <td>第七名</td> </tr>  
    </table>
</body>
</html>

三、表头单元格标签

上面的虽然有表格的意思，却不像个表格。

这小节主要是讲解表头单元标签。一般表头位于第一列或者第一行，表头内容加粗并居中显示。

【语法】：      <th> 表头</th>

四、表格的相关属性

经常使用office的人对表格属性一定不陌生。

表格标签这部分，属性并不常用，实际上通过css来设置。

可以设置边框、字的大小、格式等等。

注意：这些属性要写到table标签里面去。

属性名属性值描述
alignleft  、 center 、 right规定表格相对周围元素的对齐方式
border1  或  “”规定表格是否有边框，默认为“”，表示没有边框
cellpadding像素值规定单元格与内容之间的空白，默认1像素
cellspacing像素值单元格和单元格之间的距离，默认两像素，可以设置为0，看着是认识的单元格
width/height像素值或百分比规定表格的宽度/高度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align = "center" border="1" cellpadding="0" cellspacing="0" width="500">
        
        <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>名次</th> </tr>  
        <tr> <td>小明</td> <td>男</td> <td>18</td> <td>第二名</td> </tr>  
        <tr> <td>小红</td> <td>女</td> <td>17</td> <td>第五名</td> </tr>  
        <tr> <td>小朱</td> <td>男</td> <td>19</td> <td>第七名</td> </tr>  
    </table>
</body>
</html>

五、表格结构标签

使用场景：表格很大，你忍一下。

在表格标签中，用<head>标签表示表格的头部区域，<tbody>标签表示表格的主体部分。

<thead></thaed>

<tbody></tbody>

六、案例分析 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>今日小说排行榜</title>
</head>
<body>
    <table align="center" width="500" height="249" border="1" cellspacing="0">
    <thead>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>

        <tr>
                <td>2</td>
                <td>西游记</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>3</td>
                <td>东游记</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>4</td>
                <td>猪八戒</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>5</td>
                <td>小姐姐</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>6</td>
                <td>嘻哈哈</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
    </tbody>           
    </table>
</body>
</html>

 七、合并单元格

合并单元格的方式：

  • 跨行合并：rowspan = 合并单元格的个数
  • 跨列合并：colspan = 合并单元格的个数

目标单元格：合并后会形成一个新的单元格，称为目标单元格，对于跨行，最上侧的单元格为目标单元格；对于跨列单元格，最左侧单元格为目标单元格。

合并单元格三步曲：

  • 先确定是跨行还是跨列
  • 找到目标单元格，写上合并方式 = 合并的单元格数量，例如<td colspan = "2"></td> 
  • 删除多余的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>合并单元格</title>
</head>
<body>
    <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>
</body>
</html>

这篇关于零基础学习WEB前端开发(九)：表格标签的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航