HTML表格标签

寒涵含

已于 2024-02-11 03:31:08 修改

阅读量176

点赞数 1

文章标签： html 前端

于 2024-01-28 00:31:47 首次发布

本文链接：https://blog.csdn.net/qq_73625238/article/details/135890820

版权

一，表格的主要作用

表格主要用于展示,表示数据——使数据变得整洁（注意不是用来展示数据）

二，表格的基本语法

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

(1).<table></table> 用于定义表的标签

(2).<tr></tr> 用于表明单元格一行（必须在<table>中使用）

(3).<tb></tb> 表示一个单元格内的文字（必须在<tr>中使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr><td>姓名</td><td>性别</td><td>年龄 </td></tr>
        <tr><td>乐乐</td><td>女</td><td>18岁</td></tr>
        <tr><td>寒涵含</td><td>男</td><td>19岁</td></tr>
        <tr><td>没名字</td><td>男</td><td>19岁</td></tr>
    </table>
</body>
</html>

二，表头单元格

第一行或者第一列，使其加粗，居中

<table>
    <tr>
        <th>表头演出表现</th>
        ...
        </tr>
    ...
</table>

三，表格属性（一般使用css完成做为了解）

(1).

1.align left,center,right 规定表格相对周围元素的对齐方式

2.border 1或" " 规定表格单元是否拥有边框，默认为" ",表现没有边框

3.cellpadding 像素值规定单元边沿与其内容之间的空白，默认1像素

4.cellspacing 像素值规定单元格之间的空白，默认2像素

5.width 像素值或百分比规定表格的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表格属性要写在表格标签 table里面 -->
    <table align="center" border="1" cellpadding="2" cellspacing="0" width="500px" height="300px">
        <tr><th>姓名</th><th>性别</th><th>年龄 </th></tr>
        <tr><td>乐乐</td><td>女</td><td>18岁</td></tr>
        <tr><td>寒涵含</td><td>男</td><td>19岁</td></tr>
        <tr><td>没名字</td><td>男</td><td>19岁</td></tr>
    </table>
</body>
</html>

四，表格结构标签

可以将表格分割为表格头部和表格主体（区域）

1.<thead>标签表格的头部标签，其中一定有<tr> 标签

2.<tbody>标签表格的主题区域，去存放表格的结构

五，合并单元格

1.合并单元格

(1).跨行合并：rowspan="合并单元格的个数"

(2).跨列合并：colspan="合并单元格的个数"

(3).目标单元格：（写合并代码）

跨行：最上测单元格为目标单元格，写出合并代码

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

2.注意事项

(1)确当合并方式

(2)找到目标单元格<td colspen="合并数量"></tb>

(3)一定要删除多余单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格</title>
</head>
<body>
    <table cellspacing="0" border="1" height="300" width="500">
    <thead height="80">
        <!-- 一定要删除合并后多于单元格 -->
        <tr>
            <td>  </td>
            <td colspan="2">  </td>
            
            <td>  </td>
            <td>  </td>
        </tr>
   </thead>
    <tbody>
        <tr>
            <td>  </td>
            <td>  </td>
            <td rowspan="3">  </td>
            <td>  </td>
            <td>  </td>
        </tr>
        <tr>
            <td>  </td>
            <td>  </td>
            
            <td>  </td>
            <td>  </td>
        </tr>
        <tr>
            <td>  </td>
            <td>  </td>
           
            <td>  </td>
            <td>  </td>
        </tr>
    </tbody>
</table>
</body>
</html>