HTML-表格

最新推荐文章于 2024-07-22 11:58:10 发布

中条山伯爵

最新推荐文章于 2024-07-22 11:58:10 发布

阅读量82

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_41724020/article/details/107446834

版权

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

基本表格

以下只写出了关键代码

<center><h1><font color = "red">表格</font></h1></center>
<hr>
<table align="center" border="1px" width="60%" height="150px">	
<!--border = "1px" 设置表格边框为1像素宽度,align-对齐方式-->
	<tr align="center">	
		<!--tr(table row) td(table data)-->
		<td>a</td>
		<td>b</td>
		<td>c</td>
	</tr>
	<tr align="center">
		<td>x</td>
		<td>y</td>
		<td>z</td>
	</tr>
</table>

效果如下
在这里插入图片描述

单元格合并以及th标签

row合并的时候，删除下边的单元格
col合并的时候，对删除哪个没有要求
th标签也是单元格标签，比td多的是加粗、居中

先建立一个基本表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单元格合并和th标签</title>
</head>
<body>
    <table border="1px" width="50%">
        <tr>
            <th>员工姓名</th>
            <th>薪水</th>
            <th>部门</th>
        </tr>
        <tr align="center">
            <td>zhangsan</td>
            <td>1000</td>
            <td>财务部</td>
        </tr>
        <tr align="center">
            <td>lisi</td>
            <td>2000</td>
            <td>管理部</td>
        </tr>
    </table>
</body>
</html>

效果如下
在这里插入图片描述
接下来进行row合并，将"管理部"删掉，在"财务部"的td标签上加上rowspan=“2”，就完成了合并。（span有跨越、穿过的意思）

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单元格合并和th标签</title>
</head>
<body>
    <table border="1px" width="50%">
        <tr>
            <th>员工姓名</th>
            <th>薪水</th>
            <th>部门</th>
        </tr>
        <tr align="center">
            <td>zhangsan</td>
            <td>1000</td>
            <td rowspan="2">财务部</td>
        </tr>
        <tr align="center">
            <td>lisi</td>
            <td>2000</td>
            <!--
            <td>管理部</td>
            -->
        </tr>
    </table>
</body>
</html>

效果
在这里插入图片描述
接下来进行col合并，前面说过，col合并时对删除哪个没有要求。
先将"2000"删除，然后在"lisi"的td标签上加上colspan=“2”，就完成了合并。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单元格合并和th标签</title>
</head>
<body>
    <table border="1px" width="50%">
        <tr>
            <th>员工姓名</th>
            <th>薪水</th>
            <th>部门</th>
        </tr>
        <tr align="center">
            <td>zhangsan</td>
            <td>1000</td>
            <td rowspan="2">财务部</td>
        </tr>
        <tr align="center">
            <td colspan="2">lisi</td>
            <!--
            <td>2000</td>
            -->
            <!--
            <td>管理部</td>
            -->
        </tr>
    </table>
</body>
</html>

效果
在这里插入图片描述

thead、tbody和tfoot

thead、tbody和tfoot在table中不是必须的，加上的话便于后期JS代码的编写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单元格合并和th标签</title>
</head>
<body>
    <table border="1px" width="50%">
        <thead>
            <tr>
                <th>员工姓名</th>
                <th>薪水</th>
                <th>部门</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td>zhangsan</td>
                <td>1000</td>
                <td>财务部</td>
            </tr>
        </tbody>
        <tfoot>
            <tr align="center">
                <td>lisi</td>
                <td>2000</td>
                <td>管理部</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

中条山伯爵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML-表格

基本表格// 以下只写出了关键代码<center><h1><font color = "red">表格</font></h1></center><hr><table align="center" border="1px" width="60%" height="150px"> // border = "1px" 设置表格边框为1像素宽度,align-对齐方式 <tr align="center"&
复制链接

扫一扫