19 表格标签基本使用

最新推荐文章于 2022-10-01 21:36:50 发布

hello_sunny123

最新推荐文章于 2022-10-01 21:36:50 发布

阅读量238

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/hello_sunny123/article/details/118195117

版权

前端专栏收录该内容

60 篇文章 3 订阅

订阅专栏

1.表格的主要作用

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

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

2.表格的基本语法

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

1. <table> </table>是用于定义表格的标签。
2. <tr> </tr>标签用于定义表格中的行,必须嵌套在<table> </table>标签中。
3. <td> </td>用于定义表格中的单元格,必须嵌套在<tr> </tr>标签中。
4·字母 td 指表格数据(table data) ,即数据单元格的内容。

代码内容：

<!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>表格</title>
</head>
<body>
    <table>
        <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
        <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>
    </table>
</body>
</html>

代码内容：

在这里插入图片描述

3.表头单元格标签

一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示。
<th>标签表示HTML表格的表头部分(table head的缩写)

<table>
    <tr>
        <th>姓名</th>
        ...
    </tr>
    ...
</table>

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

4.表格属性(不用刻意会，了解)

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

目的有2个：

1.记住这些英语单词后面CSS会使用

2.直观感受表格的外观形态.

在这里插入图片描述

代码：

<!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>表格</title>
</head>
<body>
    <!-- 这些属性要写到表格标签 table 里边去 -->
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="249" >
        <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
        <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>
    </table>
</body>
</html>

cellpadding:设置单元格里边内容和边框之间的距离

cellspacing:设置单元格和单元格间的距离

在这里插入图片描述

5.合并单元格

特殊情况下,可以把多个单元格合并为一个单元格,这里同学们会最简单的合并单元格即可

1.合并单元格方式

2.目标单元格

3.合并单元格的步骤

在这里插入图片描述

合并单元格方式:

跨行合并: rowspan=“合并单元格的个数”

跨列合并: colspan=“合并单元格的个数”

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

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

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

在这里插入图片描述

合并单元格三步曲:
1.先确定是跨行还是跨列合并。
2.找到目标单元格写上合并方式=合并的单元格数量。比如: <td colspan= "2" ></td>。
3·删除多余的单元格。

代码示例：

<!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>合并单元格</title>
</head>
<body>
    <table align="center" border="1" cellspacing="0" width="500" height="200">
        <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>

在这里插入图片描述

6.总结

表格学习整体可以分为三大部分:

1.表格的相关标签

我们学习了 table标签 tr行标签 td单元格标签 th表头单元格标签 thead表格头部区域标签 tbody表格头部区域标签

在这里插入图片描述

2.表格的相关属性

在这里插入图片描述

3.合并单元格

在这里插入图片描述

hello_sunny123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
19 表格标签基本使用

1.表格的主要作用表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的装格能够把繁杂的数据表现得很有条理。表格不是用来布局页面的,而是用来展示数据的。2.表格的基本语法<table> <tr> <td>单元格内的文字</td> ... </tr> ...</table>1.
复制链接

扫一扫