前端HTML学习 table标签知识点与使用

最新推荐文章于 2022-12-28 12:39:47 发布

BIG*BOSS

最新推荐文章于 2022-12-28 12:39:47 发布

阅读量269

点赞数

分类专栏： HTML 文章标签： HTML 前端

本文链接：https://blog.csdn.net/qq_42158942/article/details/94575031

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

表格基本结构

<table>
	<tr>
			<td>单元格</td>
	</tr>
</table>

< tr >表示行
< td>表示格 / 列
例如 2行2列

<table>
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

表格的属性
在这里插入图片描述 ------>上述table属性查自w3cschool<----

表格合并单元格方法

表格跨行（纵向）合并<td rowspan="2"></td>
表格跨列 ( 横向 ) 合并 <td colspan="2"></td>
其中的“2”是跨的行数/列数，设置需要的数量即可
试一试做一下这个表格
在这里插入图片描述我按最小单元格为参考，设置了一行多少格；再数该表格有多少列；绘出表格
参考代码如下（代码不唯一，仅供参考）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        caption{
            font-size: 30px;
            font-weight: bold;
        }
        tr{
            text-align: center;
        }
        td{
            width: 50px;
        }
    </style>
</head>
<body>
    <table border="1" cellspacing="0" width="1100px" height="480px" align="center">
        <caption>差旅费报销单</caption>
        <tr>
            <td colspan="2">姓名</td>
            <td colspan="2"></td>
            <td>级别</td>
            <td colspan="2"></td>
            <td colspan="7">事由</td>
            <td colspan="8" align="left">出差时间：</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">起始时间</td>
            <td colspan="2" rowspan="2">起始地点</td>
            <td colspan="2">车船费</td>
            <td colspan="2">住宿费</td>
            <td colspan="5">补贴费</td>
            <td colspan="2">市内交通费</td>
            <td colspan="7" rowspan="2" align="left">报销人：</td>
        </tr>
        <tr>
            <td>张数</td>
            <td>金额</td>
            <td>张数</td>
            <td>金额</td>
            <td>天数</td>
            <td>途中</td>
            <td>住勤</td>
            <td colspan="2">夜间行车</td>
            <td>天数</td>
            <td>金额</td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
            <td colspan="7" rowspan="2" align="left">证明人：</td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
            <td colspan="7" rowspan="3" align="left">管理会计：</td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="2"></td>
            <td></td>
            <td></td>

        </tr>
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="4">合计</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
            <td rowspan="4" colspan="5" align="left">领导审核：</td>
        </tr>
        <tr>
            <td colspan="15"></td>

        </tr>
        <tr>
            <td colspan="15"></td>

        </tr>
        <tr>
            <td colspan="15"></td>

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

动手试一试，用表格布局做这一个页面

在这里插入图片描述

可以看出此项目可用 5 行 3列的表格实现

参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #t1{
            color: white;
            font-weight: bold;
            font-size: 60px;
        }
        #t2{
            color: white;
            font-size: 40px;
        }
        .t3{
            color: white;
            font-size: 30px;
        }
    </style>
</head>
<body bgcolor="#14B471">
    <table align="center">
        <tr>
            <td rowspan="5">[外链图片转存失败(img-qEJXdAdv-1562143940942)(https://mp.csdn.net/mdeditor/img/mobile.png)]</td>
            <td colspan="2" id="t1">Badger</td>
            <!--<td></td>-->
        </tr>
        <tr>
            <!--<td></td>-->
            <td colspan="2" id="t2">Remind friends later</td>
            <!--<td></td>-->
        </tr>
        <tr>
            <!--<td></td>-->
            <td colspan="2" class="t3">Remind</td>
            <!--<td></td>-->
        </tr>
        <tr>
            <!--<td></td>-->
            <td colspan="2" class="t3">They</td>
            <!--<td></td>-->
        </tr>
        <tr >
            <!--<td></td>-->
            <td height="150px">[外链图片转存失败(img-JPh8Rk5J-1562143940942)(https://mp.csdn.net/mdeditor/img/apple.png)]</td>
            <td>[外链图片转存失败(img-zVo6pxFa-1562143940943)(https://mp.csdn.net/mdeditor/img/google.png)]</td>
        </tr>
    </table>
</body>
</html>

BIG*BOSS

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端HTML学习 table标签知识点与使用

表格基本结构<table> <tr> <td>单元格</td> </tr></table>< tr >表示行< td>表示格 / 列例如 2行2列<table> <tr> <td></td> <td>&l...
复制链接

扫一扫