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>
相关推荐
u01091476019 分钟前
CSS组件库如何快速扩展_通过Sass @extend继承基础布局
jvm·数据库·python
baidu_3409988223 分钟前
Golang怎么用go-noescape优化性能_Golang如何使用编译器指令控制逃逸分析行为【进阶】
jvm·数据库·python
m0_6784854524 分钟前
如何利用虚拟 DOM 实现无痕刷新?基于 VNode 对比的状态保持技巧
jvm·数据库·python
qq_3422958227 分钟前
CSS如何实现透明背景效果_通过RGBA色彩模式控制透明度
jvm·数据库·python
TechWayfarer28 分钟前
知乎/微博的IP属地显示为什么偶尔错误?用IP归属地查询平台自检工具3步验证
网络·python·网络协议·tcp/ip·网络安全
Mr数据杨37 分钟前
加州房价中位数预测在房地产估值中的应用
机器学习·数据分析·kaggle
Greyson142 分钟前
CSS如何处理超长文本换行问题_结合word-wrap属性
jvm·数据库·python
码事漫谈1 小时前
大模型输出的“隐性结构塌缩”问题及对策
前端·后端
justjinji1 小时前
如何批量更新SQL数据表_使用UPDATE JOIN语法提升效率
jvm·数据库·python
小江的记录本1 小时前
【网络安全】《网络安全常见攻击与防御》(附:《六大攻击核心特性横向对比表》)
java·网络·人工智能·后端·python·安全·web安全