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>
相关推荐
cosX+sinY13 分钟前
10 卷积神经网络
python·深度学习·cnn
非极限码农21 分钟前
基于Deepseek的语言润色助手API实现与部署指南
python·微服务·自然语言处理
Entropy-Lee22 分钟前
JavaScript 语句和函数
开发语言·前端·javascript
I love studying!!!32 分钟前
python基础:用户输入和 while 循环
python
Wcowin1 小时前
MkDocs文档日期插件【推荐】
前端·mkdocs
AndrewHZ2 小时前
【图像处理基石】如何对遥感图像进行实例分割?
图像处理·人工智能·python·大模型·实例分割·detectron2·遥感图像分割
No0d1es2 小时前
第13届蓝桥杯Python青少组中/高级组选拔赛(STEMA)2021年11月27日真题
python·青少年编程·蓝桥杯·选拔赛
TDengine (老段)2 小时前
TDengine 中 TDgp 中添加机器学习模型
大数据·数据库·算法·机器学习·数据分析·时序数据库·tdengine
xw52 小时前
免费的个人网站托管-Cloudflare
服务器·前端
天天找自己2 小时前
精通分类:解析Scikit-learn中的KNN、朴素贝叶斯与决策树(含随机森林)
python·决策树·机器学习·分类·scikit-learn