前端系列之HTML（表格）

最新推荐文章于 2024-08-14 12:55:09 发布

众拾达人

最新推荐文章于 2024-08-14 12:55:09 发布

阅读量5.7w

点赞数 33

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

本文链接：https://blog.csdn.net/wtdask/article/details/79092257

版权

前端专栏收录该内容

58 篇文章 5 订阅

订阅专栏

了解表格应用场景

这里写图片描述

表格基本结构

这里写图片描述

如何操作表格？

添加、删除行与列

这里写图片描述

表格属性

这里写图片描述

<caption></caption>定义表格的标题

这里写图片描述

表格跨行跨列

这里写图片描述

表格嵌套

这里写图片描述

案例：表格网页布局

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格布局</title>
</head>
<body>
<table width="100%" bgcolor="#f2f2f2">
    <!--页头-->
    <tr height="80px" bgcolor="#14191e">
        <td>1111</td>
    </tr>
    <!--上空行-->
    <tr height="10px">
        <td></td>
    </tr>
    <!--内容-->
    <tr>
        <td>
            <table align="center" width="1024px">
                <tr>
                    <td width="240px"  valign="top">
                        <table width="100%" bgcolor="#ffffff">
                            <tr><td align="center" height="60px">关于我们</td></tr>
                            <tr><td align="center" height="60px">团队介绍</td></tr>
                            <tr><td align="center" height="60px">人才招聘</td></tr>
                            <tr><td align="center" height="60px">讲师招募</td></tr>
                            <tr><td align="center" height="60px">联系我们</td></tr>
                            <tr><td align="center" height="60px">常见问题</td></tr>
                            <tr><td align="center" height="60px">意见反馈</td></tr>
                            <tr><td align="center" height="60px">友情链接</td></tr>
                        </table>
                    </td> <!--左内容-->
                    <td width="20px"></td> <!--空隙-->
                    <td width="764px" bgcolor="#ffffff">
                        <pre>
春风十里，不及入门前端的你
认识你，从揭开你的神秘面纱开始

Web前端开发是从网页制作演变而来，其中包括三个要素：HTML、CSS和JavaScript；
Web前端用人数量已经远远超过主流编程语言的开发人员的数量。
熟悉你，从了解你的方方面面入手
实现Web端界面和移动端的界面
比如，网站设计、网页界面开发、前台数据的获取和绑定、以及动态特效等
选择你，并着手规划与你的未
据职友集数据显示，2016年Web前端岗位月薪最高达到2-3万元，月平均薪资8190元，预计在2017年待遇将再一次水涨船
春风十里，不及入门前端的
认识你，从揭开你的神秘面纱开始
春风十里，不及入门前端的你
认识你，从揭开你的神秘面纱开始

Web前端开发是从网页制作演变而来，其中包括三个要素：HTML、CSS和JavaScript；
Web前端用人数量已经远远超过主流编程语言的开发人员的数量。
熟悉你，从了解你的方方面面入手
实现Web端界面和移动端的界面
比如，网站设计、网页界面开发、前台数据的获取和绑定、以及动态特效等
选择你，并着手规划与你的未
据职友集数据显示，2016年Web前端岗位月薪最高达到2-3万元，月平均薪资8190元，预计在2017年待遇将再一次水涨船
春风十里，不及入门前端的
认识你，从揭开你的神秘面纱开始
春风十里，不及入门前端的你
认识你，从揭开你的神秘面纱开始

Web前端开发是从网页制作演变而来，其中包括三个要素：HTML、CSS和JavaScript；
Web前端用人数量已经远远超过主流编程语言的开发人员的数量。
熟悉你，从了解你的方方面面入手
实现Web端界面和移动端的界面
比如，网站设计、网页界面开发、前台数据的获取和绑定、以及动态特效等
选择你，并着手规划与你的未
据职友集数据显示，2016年Web前端岗位月薪最高达到2-3万元，月平均薪资8190元，预计在2017年待遇将再一次水涨船
春风十里，不及入门前端的
认识你，从揭开你的神秘面纱开始
                        </pre>

                    </td> <!--右内容:单元格宽度的和=表格宽度1024px-->
            </table>

        </td>
    </tr>
    <!--下空行-->
    <tr height="10px">
        <td></td>
    </tr>
    <!--页脚-->
    <tr height="150px" bgcolor="#14191e">
        <td>111</td>
    </tr>
</table>
</body>
</html>