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>
相关推荐
Codebee2 分钟前
# 🔥A2UI封神!元数据驱动的AI交互新范式,技术人必看
前端·架构
JarvanMo10 分钟前
展望 2030 年:移动开发者的未来将如何?
前端
我的xiaodoujiao11 分钟前
使用 Python 语言 从 0 到 1 搭建完整 Web UI自动化测试学习系列 34--基础知识 9--文件上传功能
前端·python·测试工具·ui·pytest
辛-夷12 分钟前
pinia与Vuex高频面试题
前端·vue.js
咸鱼加辣14 分钟前
【python面试】Python 的 lambda
javascript·python·算法
感谢地心引力16 分钟前
【AI】加入AI绘图的视频封面快速编辑器
人工智能·python·ai·ffmpeg·音视频·pyqt·gemini
.生产的驴20 分钟前
泛微E10二开 前端Ecode拦截器
前端
我一定会有钱24 分钟前
pytest测试框架基础
python·单元测试·自动化·pytest
亿元程序员26 分钟前
PinK(Cocos4.0?)生成飞机大战,抢先体验全流程!
前端
cr_每天进步一点点26 分钟前
【无标题】
人工智能·python·机器学习