HTML Table表格详解

~black-
前端领域新星创作者
2023-06-06 08:41:01

目录

 

 一、表格属性

二、table表格示例代码

三、单元格合并问题


 一、表格属性

表格属性 用法

border

代表表格边框厚度  width height 表格宽高

align

table tr td 设置水平方向对齐方式 默认值left center right

cellspacing

单元格到单元格距离

cellpadding

单元格文字到单元格边框距离

bgcolor

表格背景颜色  table tr td 都可以使用

background

可以给表格设置背景图片

valign

设置垂直对齐方式 top middle(默认值) bottom

合并表格单元格边框,给表格设置样式

      border-collapse: collapse;

二、table表格示例代码

<!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>Document</title>
        <style>
            /* table{
			合并单元格边框
			border-collapse: collapse;
		} */
        </style>
    </head>
    <body>
        <table cellpadding="5" align="center" border="1" width="400px" height="300px" cellspacing="0">
            <!-- 一个tr代表一行 一个td代表一列 -->
            <tr>
                <!-- 表格表头标签 自带居中加粗效果 -->
                <th align="right" valign="bottom">姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr valign="top">
                <td valign="bottom">张三</td>
                <td valign="middle">15</td>
                <td>男</td>
            </tr>
            <tr>
                <td>高启强</td>
                <td>35</td>
                <td>男</td>
            </tr>
        </table>
        <!-- 细线表格 -->
        <table bgcolor="black" cellspacing="1">
            <tr bgcolor="white">
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
            </tr>
            <tr bgcolor="white">
                <td>张三</td>
                <td>15</td>
                <td>女</td>
            </tr>
        </table>
        <!-- 表格完整结构  -->
        <table border="1" cellspacing="0" align="center">
            <!-- 表格标题标签 -->
            <caption>
                个人信息表
            </caption>
            <!-- 表头 -->
            <thead>
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>操作</th>
                </tr>
            </thead>
            <!-- 表体 -->
            <!-- 不写tbody浏览器是会自动补全 -->
            <tbody>
                <tr>
                    <td width="150px">1</td>
                    <td>其他</td>
                    <td>删除</td>
                </tr>
            </tbody>
            <!-- 表脚 -->
            <tfoot></tfoot>
        </table>
    </body>
</html>

达到的效果图如下,大家可以根据表格属性  自己进行操作实践

三、单元格合并问题

跨行合并 rowspan='number'  跨列合并 colspan='number'

 未进行合并之前代码示例:

<!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>Document</title>
    </head>
    <body>
        <table border="1" cellspacing="0" align="center" width="300px" height="300px">
            <!-- ctrl + enter 表示换行  -->
            <!-- 跨行合并 rowspan='number'  跨列合并 colspan='number' -->
            <tr>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <!-- 跨多行列合并 -->
                <td>14</td>
                <td>15</td>
                <td>16</td>
            </tr>
            <tr>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
                <td>25</td>
                <td>26</td>
            </tr>
            <tr>
                <td>31</td>
                <td>32</td>
                <td>33</td>
                <td>34</td>
                <td>35</td>
                <td>36</td>
            </tr>
        </table>
    </body>
</html>

 合并后的效果图如下:

合并代码如下:

<!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>Document</title>
    </head>
    <body>
        <table border="1" cellspacing="0" align="center" width="300px" height="300px">
            <!-- ctrl + enter 表示换行  -->
            <!-- 跨行合并 rowspan='number'  跨列合并 colspan='number' -->
            <tr>
                <td colspan="2">11</td>
                <!-- <td>12</td> -->
                <td>13</td>
                <!-- 跨多行列合并 -->
                <td colspan="3" rowspan="2">14</td>
                <!-- <td>15</td>
			<td>16</td> -->
            </tr>
            <tr>
                <td>21</td>
                <td rowspan="2">22</td>
                <td>23</td>
                <!-- <td>24</td> -->
                <!-- <td>25</td>
			<td>26</td> -->
            </tr>
            <tr>
                <td>31</td>
                <!-- <td>32</td> -->
                <td>33</td>
                <td>34</td>
                <td>35</td>
                <td>36</td>
            </tr>
        </table>
    </body>
</html>

 

...全文
成就一亿技术人!
拼手气红包 8.00元
594 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

231,210

社区成员

发帖
与我相关
我的任务
社区描述
欢迎加入几何心凉的前端社区,本社区活动丰富可以拿到众多周边礼物,本社区还对接Vue技能树可以更加系统的进行学习,还为大家定期举办博主成长计划,助您赢在CSDN同时带您遨游在前端技术的海洋中!!
前端学习经验分享 个人社区 北京·丰台区
社区管理员
  • 几何心凉
  • 秃秃爱健身
  • 努力的小鳴人
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

诚挚的邀请大家加入几何心凉社区,在这里您可以结实挚友、提升技术、分享经验、成就自己

  • 【社区活动】本社区受官方长期扶持,您可以通过活动打造个人IP,让更多的人受益于您的分享,同时我们还会奉上精美周边;
  • 【赢在CSDN】社区会对社区成员开设博主扶持计划,集结优质博主分享成长经验,更是疑问在线解答,定期直播连麦,只要您是本社区成员皆可免费享受此权益,让我们携手共进助您速获万粉头衔;
  • 【Vue技能树】本社区创建人同时作为Vue技能树构建者,可为本社区开设技能树投稿通道,获得此权益后我们的高质量的文章被技能树收录获得更多曝光机会;
  • 【简历/就业指导】本社区创建者目前兼职高校就业指导,如果您是学生准备找工作或者您是职场人在应聘中遇到任何问题都可以在这里寻求帮助,我们会定期开设简历审查、面试技巧等就业方面的直播讲解;
  • 【技术交流】任何语言任何方向的技术文章我们都可以汇聚于此,大家可以摸鱼时间可以来此处提升自己,遨游在技术的海洋中;
  • 【立码吐槽】不管你是学生还是打工人,相信在生活中肯定有不断的新鲜事发生,这些事情可以是令你高兴的(比如今天过生日)可以是伤心的(比如我们丢了一个发卡)当然还会有很多,不满、发泄、求安慰等等,那么你可以在这个专栏中做出分享,求一句生日快乐、上岸顺利、加油老铁等等暖心的话;相信我们社区的伙伴看到后一定会速来吐槽;
  • 【bug记录】开发中的坑、学习中的雷,我们皆可投递于此,让更多的人借着分享精准避免从而高效开发;
  • 【更多】更多专栏正在筹备中。。。如果您是社区成员、如果您想为社区建设贡献力量,可以私聊社区管理员;

试试用AI创作助手写篇文章吧