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>
相关推荐
咖啡星人k10 分钟前
从需求到交付:我用MonkeyCode的AI Agent完成了一个React数据看板
前端·人工智能·react.js·monkeycode
sxlishaobin13 分钟前
linux 自动清除日志 脚本
linux·服务器·前端
郑洁文19 分钟前
基于Python的网络入侵检测系统
网络·python·php
ZC跨境爬虫22 分钟前
跟着 MDN 学CSS day_37:(从文档流到粘性定位的底层原理)
前端·javascript·css·ui·html
AIMath~24 分钟前
python中的uv命令揭秘
开发语言·python·uv
弹简特27 分钟前
【零基础学Python】06-Python模块和包、异常处理、文件常用操作
开发语言·python
念恒1230637 分钟前
Python 面向对象编程核心:对象、实例化、封装与变量作用域
开发语言·python
IccBoY39 分钟前
NVM超详细全解教程:解决Node版本冲突(Win/Mac/Linux安装+使用+踩坑合集)
前端·node.js
薛定谔的悦41 分钟前
光伏-储能-负荷联合预测:给 EMS 装上“预知能力“
java·数据库·人工智能·python·储能
wuhen_n41 分钟前
前端工程师进阶提示词工程实战
前端·langchain·ai编程