-表格标签

最新推荐文章于 2024-10-10 22:49:27 发布

Felece

最新推荐文章于 2024-10-10 22:49:27 发布

阅读量101

点赞数

分类专栏：前端文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_51651340/article/details/124460483

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一：表格的主要作用

主要用于显示数据。让数据显示的非常规整，可读性非常好，尤其为后台展示时

二：表格的基本语法

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

<table></table>是用于定义表格的标签

<tr></tr>定义表格中的行，必须嵌套在<table></table>标签中

<td></td>定义表格中的单元格，必须嵌套在<tr></tr>标签中

三：表头单元格标签

一般表头单元格位于表格的第一行或者第一列，标头单元格里面的文本内容加粗居中显示，突出重要性

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

举例：

<!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>
        <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>

四：表格属性

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

<!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 里面去 -->
    <table align="center" border="1" cellpadding="0" 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>

五：表格结构标签

（一）：<thead></thead>:用于定义表格头部。<thead>内部必须有<tr>标签

（二）：<tbody></tbody>:用于定义表格的主体，用于放数据主体

（三）：<thead></thead>和<tbody></tbody>都是放在<table></table>标签中。

六：合并单元格

合并单元格方式：

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

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

写法：跨行-最上侧单元格为目标单元格，写合并代码，最后将多余的删掉

跨列-最左侧单元格为目标单元格，写合并代码，最后将多余的删掉

<!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>