HTML表格标签

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<!--
    table:表格标签,里面包含 行 tr 和单元格 td(相当于列)
        tr:行            有几行就写几个tr
        td:单元表格 cell  有几列就写几个td
                尽量每一行的列数保持一致,数据显示会比较好看
                整个表格的单元格大小会根据内容的长度自动调整
                表格的文字居中需要把align = "center"写在tr里,可以让整行文字居中

    border:边框宽度
    bordercolor:边框颜色 默认黑色
    width:表格宽度
    height:表格高度
    bgcolor:背景颜色
    cellspacing:单元格的间距  默认是有间隔的,可以设置为0
    cellpadding:单元格的内间距  单元格内容跟边框之间的距离,有时候为了表格显示好看,会设置些值让内容与左边的边框有些间距。
    align = "center" :表格在页面水平居中
        <tr align = "center"  >  这行的文字居中
        <td align = "left"  >年龄</td>   单元格中文字巨左  当单元格内容很长时 中文会自动换行 英文不会自动换行

img和现在的table宽高不用加单位px  style宽高需要加单位px
图片和表格可以写宽高,其他的不一定可以,表单的iput标签就不行
不能写宽高的地方可以在style里面写
    -->

    <table border="1" bordercolor = "red" width = "300"
           height = "100" bgcolor = "orange"
           cellspacing = "10" cellpadding = "0" align = "center" >

        <tr align="right" height = "30">
            <td >姓名</td>
            <td align="left">年龄</td>
            <td>微信</td>
        </tr>
        <tr>
            <td width="60">周杰伦</td>
            <td>45</td>
            <td>Jay</td>
        </tr>
    </table>
<hr>
<!--    单元格合并
        rowspan:行合并 : 值写合并自己和下方单元格的个数
        colspan:列合并 : 值写合并自己和其他单元格的个数

    -->
<table border="1" width="300" height = "200" cellspacing="0">
    <tr align="center">
        <td width = "100">姓名</td>
        <td width = "100">年龄</td>
        <td width = "100">性别</td>
    </tr>
    <tr>
        <td>坤坤</td>
        <td>26</td>
        <td rowspan="2">男</td>
    </tr>
    <tr>
        <td>鹿晗</td>
        <td>30</td>
        <!-- <td>男</td> -->
    </tr>
    <tr>
        <td>刘亦菲</td>
        <td colspan="2">18 女</td>
        <!--  <td>女</td> -->

    </tr>
</table>


</body>
</html>
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<!--
    table:表格标签,里面包含 行 tr 和单元格 td(相当于列)
        tr:行            有几行就写几个tr
        td:单元表格 cell  有几列就写几个td
                尽量每一行的列数保持一致,数据显示会比较好看
                整个表格的单元格大小会根据内容的长度自动调整
                表格的文字居中需要把align = "center"写在tr里,可以让整行文字居中

    border:边框宽度
    bordercolor:边框颜色 默认黑色
    width:表格宽度
    height:表格高度
    bgcolor:背景颜色
    cellspacing:单元格的间距  默认是有间隔的,可以设置为0
    cellpadding:单元格的内间距  单元格内容跟边框之间的距离,有时候为了表格显示好看,会设置些值让内容与左边的边框有些间距。
    align = "center" :表格在页面水平居中
        <tr align = "center"  >  这行的文字居中
        <td align = "left"  >年龄</td>   单元格中文字巨左  当单元格内容很长时 中文会自动换行 英文不会自动换行

img和现在的table宽高不用加单位px  style宽高需要加单位px
图片和表格可以写宽高,其他的不一定可以,表单的iput标签就不行
不能写宽高的地方可以在style里面写
    -->

    <table border="1" bordercolor = "red" width = "300"
           height = "100" bgcolor = "orange"
           cellspacing = "10" cellpadding = "0" align = "center" >

        <tr align="right" height = "30">
            <td >姓名</td>
            <td align="left">年龄</td>
            <td>微信</td>
        </tr>
        <tr>
            <td width="60">周杰伦</td>
            <td>45</td>
            <td>Jay</td>
        </tr>
    </table>
<hr>
<!--    单元格合并
        rowspan:行合并 : 值写合并自己和下方单元格的个数
        colspan:列合并 : 值写合并自己和其他单元格的个数

    -->
<table border="1" width="300" height = "200" cellspacing="0">
    <tr align="center">
        <td width = "100">姓名</td>
        <td width = "100">年龄</td>
        <td width = "100">性别</td>
    </tr>
    <tr>
        <td>坤坤</td>
        <td>26</td>
        <td rowspan="2">男</td>
    </tr>
    <tr>
        <td>鹿晗</td>
        <td>30</td>
        <!-- <td>男</td> -->
    </tr>
    <tr>
        <td>刘亦菲</td>
        <td colspan="2">18 女</td>
        <!--  <td>女</td> -->

    </tr>
</table>


</body>
</html>
相关推荐
前端不太难5 小时前
从 Navigation State 反推架构腐化
前端·架构·react
前端程序猿之路6 小时前
Next.js 入门指南 - 从 Vue 角度的理解
前端·vue.js·语言模型·ai编程·入门·next.js·deepseek
大布布将军6 小时前
⚡️ 深入数据之海:SQL 基础与 ORM 的应用
前端·数据库·经验分享·sql·程序人生·面试·改行学it
醒过来摸鱼6 小时前
Java classloader
java·开发语言·python
superman超哥6 小时前
仓颉语言中元组的使用:深度剖析与工程实践
c语言·开发语言·c++·python·仓颉
小鸡吃米…6 小时前
Python - 继承
开发语言·python
川贝枇杷膏cbppg6 小时前
Redis 的 RDB 持久化
前端·redis·bootstrap
JIngJaneIL7 小时前
基于java+ vue农产投入线上管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
祁思妙想7 小时前
Python中的FastAPI框架的设计特点和性能优势
开发语言·python·fastapi
Dingdangcat867 小时前
反恐精英角色识别与定位-基于改进的boxinst_r101_fpn_ms-90k_coco模型实现
python