HTML表格标签

最新推荐文章于 2024-03-19 00:49:50 发布

2022_YANG

最新推荐文章于 2024-03-19 00:49:50 发布

阅读量596

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/m0_48289363/article/details/124075429

版权

一、表格的作用

我在刚开始学习使用表格时进入了一个误区，表格会让代码书写以及网页布局更好看，就想当然的觉得表格的作用是布局。但其实表格的主要作用是显示数据、展示数据。

二、表格的基本语法

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

1.<table></table>是用来定义表格的标签。

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

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

4.字母td是指表格数据，即数据单元格的内容。

给出下图方便大家理解<table>，<tr>,<td>的关系。

三、表头单元格标签

<th></th>标签用于HTML表格的表头部分。使单元格里的数据具有加粗，居中的效果。

四、表格的属性

五、表格结构标签

表格的结构标签包括表格头部，表格主体，以及表格页脚。用<thead>表示表格的头部区域，<tbody>表示表格的主体部分，<tfoot>表示表格的页脚。当使用表格结构标签时有以下好处：

1、如果表格比较长，在浏览器中滚动表格页面时，每个页面除了显示表格主体外，也会显示表格的表头和页脚。
2、当表格太长，需要被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

六、合并单元格

合并单元格分为跨行合并和跨列合并。

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

目标单元格：（合并写代码）
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
合并单元格三部曲：
1.先确定是跨行还是跨列合并
2.找到目标单元格，写上合并方式=合并单元格的数量

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>
    <h2 align="center">个人简历</h2>
    <table align="center" border="1" width="650" cellspacing="0" cellpadding="10">
        <tr>
            <td>姓名</td>
            <td width="75"></td>
            <td>性别</td>
            <td width="75"></td>
            <td>民族</td>
            <td width="75"></td>
            <td rowspan="5" width="75">照片</td>
        </tr>
        <tr>
            <td>出生年月</td>
            <td></td>
            <td>籍贯</td>
            <td></td>
            <td>年龄</td>
            <td></td>
        </tr>
        <tr>
            <td>现居住地</td>
            <td></td>
            <td>联系电话</td>
            <td></td>
            <td>电子邮箱</td>
            <td></td>
        </tr>
        <tr>
            <td>学历</td>
            <td></td>
            <td>政治面貌</td>
            <td></td>
            <td>婚姻状况</td>
            <td></td>
        </tr>
        <tr>
            <td>学校</td>
            <td></td>
            <td>专业</td>
            <td></td>
            <td>绩点</td>
            <td></td>
        </tr>
        <tr>
            <td>就业意向</td>
            <td colspan="6"></td>
        </tr>
        <tr>
            <td>兴趣爱好</td>
            <td colspan="6"></td>
        </tr>
        <tr>
            <td rowspan="5">工作经历</td>
            <td colspan="2">时间</td>
            <td colspan="2">公司名称</td>
            <td colspan="2">任职情况</td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td height="120">技能水平</td>
            <td colspan="6"></td>
        </tr>
        <tr>
            <td rowspan="4" height="120">自我评价</td>
            <td colspan="6"></td>
        </tr>
        
        


    </table>
</body>
</html>