HTML:表格table

最新推荐文章于 2024-08-14 12:55:09 发布
最新推荐文章于 2024-08-14 12:55:09 发布
阅读量605 收藏 2
点赞数
文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yiXin_Chen/article/details/120630115
版权 
 表格: table
    属性:
        1) border: 设置表格和单元格的边框, 值为整数, 默认0
        2) cellspacing: 设置单元格之间的间距, 默认2
        3) cellpadding: 设置单元格的内边距, 默认1
        4) align: 设置整表格在页面中的位置.
            值: left(靠左, 默认), right(靠右), center(居中, 常用)
        5) width: 设置表格的整体宽度
            值: i. 整数, 表示像素大小
                ii.百分比, 表示占据整个页面的比例
    子元素:
        1) tr: 一行, table row
            子元素:
                i) td: 一格, 表格的一个单元格.
                    属性:
                        a.  rowspan: 跨行显示, 默认值1
                        b.  colspan: 跨列显示, 默认值1
                ii)th: 标题单元格. 文字内容加粗居中
        2) caption: 表格标题
        3) thead: 用于包裹tr,被包裹的tr可以设置一样的属性
        4) tbody: 用于包裹tr
        5) tfoot: 用于包裹tr

    tr&td的共有属性:
        1) bgcolor: 设置背景色.
            值:
                i.  使用单词, 例如: red, green, blue, ...
                ii. 使用色号, 以#开头的6位16进制数, 从左到右, 每2位分别表示红绿蓝的颜色占比
                    例如: #000000表示黑色, #ffffff表示白色, #ff0000表示红色
        2) align: 设置文字在单元格中的水平位置.
            值: left(靠左对齐, 默认), right(靠右对齐), center(居中对齐, 常用)
        3) valign: 设置文字在单元格中的垂直位置.
            值: top(顶部对齐), middle(中间对齐), bottom(底部对齐)

 

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格示例</title>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="5" width="600">
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>职务</td>
            <td>部门</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>1001</td>
            <td>张老三</td>
            <td>经理</td>
            <td>人事部</td>
            <td>男</td>
        </tr>
        <tr>
            <td>1002</td>
            <td>王老七</td>
            <td>主管</td>
            <td>人事部</td>
            <td>不详</td>
        </tr>
    </table>
    <hr>
    <table border="1" cellspacing="0" cellpadding="5" align="center" width="90%">
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>职务</td>
            <td>部门</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>1001</td>
            <td>张老三</td>
            <td>经理</td>
            <td>人事部</td>
            <td>男</td>
        </tr>
        <tr>
            <td>1002</td>
            <td>王老七</td>
            <td>主管</td>
            <td>人事部</td>
            <td>不详</td>
        </tr>
    </table>
    <hr>
    <table border="1" cellspacing="0" cellpadding="5" align="center" width="90%">
        <caption>员工信息表</caption>
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>职务</td>
            <td>部门</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>1001</td>
            <td>张老三</td>
            <td>经理</td>
            <td>人事部</td>
            <td>男</td>
        </tr>
        <tr>
            <td>1002</td>
            <td>王老七</td>
            <td>主管</td>
            <td>人事部</td>
            <td>不详</td>
        </tr>
    </table>
    <hr>
    <table border="1" cellspacing="0" cellpadding="5" align="center" width="90%">
        <caption>员工信息表</caption>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>职务</th>
            <th>部门</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>1001</td>
            <td>张老三</td>
            <td>经理</td>
            <td>人事部</td>
            <td>男</td>
        </tr>
        <tr>
            <td>1002</td>
            <td>王老七</td>
            <td>主管</td>
            <td>人事部</td>
            <td>不详</td>
        </tr>
    </table>
    <hr>
    <table border="1" cellspacing="0" cellpadding="5" align="center" width="90%">
        <caption>员工信息表</caption>
        <tr bgcolor="aqua">
            <th>ID</th>
            <th>姓名</th>
            <th>职务</th>
            <th>部门</th>
            <th>性别</th>
        </tr>
        <tr>
            <td bgcolor="#ff0000">1001</td>
            <td>张老三</td>
            <td>经理</td>
            <td>人事部</td>
            <td>男</td>
        </tr>
        <tr>
            <td>1002</td>
            <td>王老七</td>
            <td>主管</td>
            <td>人事部</td>
            <td>不详</td>
        </tr>
    </table>
    <hr>
    <table border="1" cellspacing="0" cellpadding="5" align="center" width="90%">
        <caption>员工信息表</caption>
        <tr bgcolor="aqua">
            <th>ID</th>
            <th>姓名</th>
            <th>职务</th>
            <th>部门</th>
            <th>性别</th>
        </tr>
        <tr align="center">
            <td bgcolor="#ff0000">1001</td>
            <td>张老三</td>
            <td>经理</td>
            <td>人事部</td>
            <td>男</td>
        </tr>
        <tr>
            <td align="right">1002</td>
            <td align="center">王老七</td>
            <td>主管</td>
            <td>人事部</td>
            <td>不详</td>
        </tr>
    </table>
    <hr>
    <table border="1" cellspacing="0" cellpadding="5" align="center" width="90%">
        <caption>员工信息表</caption>
        <tr bgcolor="aqua">
            <th>ID</th>
            <th>姓名</th>
            <th>职务</th>
            <th>部门</th>
            <th>性别</th>
        </tr>
        <tr align="center" bgcolor="#f5f5dc">
            <td>1001</td>
            <td>张老三</td>
            <td>经理</td>
            <td>人事部</td>
            <td>男</td>
        </tr>
        <tr align="center" bgcolor="#f5f5dc">
            <td>1002</td>
            <td>王老七</td>
            <td>主管</td>
            <td>人事部</td>
            <td>不详</td>
        </tr>
        <tbody align="center" bgcolor="#8fbc8f">
        <tr>
            <td>1001</td>
            <td>张三丰</td>
            <td>经理</td>
            <td>技术部</td>
            <td>男</td>
        </tr>
        <tr>
            <td>1001</td>
            <td>张翠山</td>
            <td>主管</td>
            <td>技术部</td>
            <td>男</td>
        </tr>
        <tr>
            <td>1001</td>
            <td>张无忌</td>
            <td>职员</td>
            <td>技术部</td>
            <td>男</td>
        </tr>
        </tbody>
    </table>
    <hr>
    <table border="1" cellspacing="0" cellpadding="5" align="center" width="90%">
        <caption>员工信息表</caption>
        <tr bgcolor="aqua">
            <th>ID</th>
            <th>姓名</th>
            <th>职务</th>
            <th>部门</th>
            <th>性别</th>
        </tr>
        <tr align="center" bgcolor="#f5f5dc">
            <td>1001</td>
            <td>张老三</td>
            <td>经理</td>
            <td rowspan="2" valign="top">人事部</td>
            <td>男</td>
        </tr>
        <tr align="center" bgcolor="#f5f5dc">
            <td>1002</td>
            <td>王老七</td>
            <td>主管</td>
            <!--<td>人事部</td>-->
            <td>不详</td>
        </tr>
        <tbody align="center" bgcolor="#8fbc8f" valign="bottom">
        <tr>
            <td>1001</td>
            <td colspan="2">张三丰</td>
            <!--<td>经理</td>-->
            <td rowspan="3">技术部</td>
            <td>男</td>
        </tr>
        <tr>
            <td>1001</td>
            <td>张翠山</td>
            <td>主管</td>
            <!--<td>技术部</td>-->
            <td>男</td>
        </tr>
        <tr>
            <td>1001</td>
            <td>张无忌</td>
            <td>职员</td>
            <!--<td>技术部</td>-->
            <td>男</td>
        </tr>
        </tbody>
    </table>
    <hr>

</body>
</html>

效果：

亦昕跑的码
关注
HTML表格table
weixin_58139900的博客
09-15 2090
表格简介 表格由 table 标签来定义。每个表格均有若干行（由tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。 类比：excel表格&网页中的表格 表格的作用 之前：web开发人员过去也常常使用表格来完成整个网页布局，结构嵌套复杂修改维护困难被DIV+CSS取代 现在：用于显示、展示数据,(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系) 注意：现在HTML 表格应该用于表格数据，而不是来实现网页布局 表格基本标签 ..
HTML中的table表格
small_by的博客
11-28 1505
table:定义表格 tr:定义行 td:定义列 //先有行，后有列 th:多用于表头，
表格
cnfbd的博客
12-26 262
表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 表格和边框属性 如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。 使用边框属性来显示一个带有边框的表格： 表格的表头使用 ...
“从零开始的HTML 表格”——WEB开发系列09
最新发布
一条晒干的咸鱼的博客
08-14 1279
HTML 表格是一种用于在网页上组织和显示信息的结构性元素，它能够将数据以行和列的形式呈现，帮助用户更清晰地理解数据关系。表格在展示统计数据、产品列表、日程安排等方面非常实用。
HTML 表格 table
Hello_super的博客
02-10 484
HTML 表格 table 1、表格简介 在现实生活中，我们经常需要使用表格来表示一些格式化数据，如：课程表、成绩单……，同样在网页中我们也需要使用表格，通过table标签来创建一个表格。在table中使用tr表示表格中的行，而tr中的td表示单元格，th表示头部单元格。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</titl
table html
09-24 90
<html><head><title>demo-110101</title><style type="text/css">table.gridtable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1p...
table-editor:表格编辑器，用于在HTML中创建复杂的表格
05-10
表格编辑器 当Markdown不能剪切时，用于复杂表的WYSIWYG HTML编辑器。 屏幕截图 现场例子 命名法 复杂表：当表在任何地方都需要标题单元格，合并的单元格和各种类时 技术文档 这是一个纯静态JavaScript应用程序，...
merge-table:对HTML表格进行合并拆分操作
05-31
HTML表格设计器可以快速的可视化设计一个表格，可以对单元格进行合并，拆分，添加，删除以及设置样式等操作，API简单易懂 ###第一步: grunt /*运行任务，生成js主文件*/ ###第二步: bower install /*安装依赖库*/ ##...
HTML 自动伸缩的表格Table js实现
10-30
HTML表格（Table）在网页设计中常常用于展示结构化数据，但它们存在一个常见的问题，即如果表格单元格（TD）中的内容过多，导致内容换行，整个表格的美观度会受到影响。为了解决这个问题，我们可以利用JavaScript...
layui-高级表格-soul-table功能-HTML源码
10-02
在传统的HTML表格中，表头通常固定不变，但在soul-table中，你可以根据需求自由调整表头样式、添加复杂的表头结构，如合并单元格、设置斜线等，满足了多样化的展示需求。 其次，多行表头是soul-table的另一个特色...
HTML表格标记教程(15):表格的标题
12-14
通过这个标记可以直接添加表格的标题，而且可以控制标题文字的排列属性。 基本语法 … 语法解释 标记之间的就是标题的内容，这个标记使用在<table>标记中. 文件范例：10—14.htm 通过标记设定表格的标题。01 <!–...
html table
MCC_3599的博客
10-13 292
&lt;tr&gt;表示一行的内容 table row 每一行里再定义每一列的显示 &lt;th&gt; 表头 table header 用于定义表头，即列标题或 行表示。一般默认粗体显示。 &lt;td&gt; 用于定义单元格的内容 table date &lt;tr&gt; &lt;td&gt; 201601 &lt;/td&gt; &lt;td&gt; shaofa &am
html_table
like_eat_apple的博客
11-18 499
<html></html>
HTML中 table
wangtao的博客
12-22 718
1.Html中的表格的结构 1.表格(table)&gt;行（tr） &gt;单元格（td）    &lt;table&gt;      &lt;tr&gt;          &lt;td&gt;&lt;/td&gt;      &lt;/tr&gt;     &lt;/table&gt; 2.基本结构的特点 a.三个标签都是表格的基本构成结构，缺一不可且嵌
HTML table表格
小芒果头的博客
06-20 317
table表格 table 表格的作用 1.div之前使用表格布局（现在极少使用） 2.在页面中使用表格显示数据 table 的构成 table是由thead，tbody，tfont三部分构成，这三个标签系统会自动填充，因此可以省略不写 表格还包含以下标签 table标签：创建一个表格 tr标签：代表表格中的一行 th标签：代表表格中的每一列的标题 td标签：代表每一行存放数据的单元格 在书写的时候需要注意的问题 1.table的子元素必须是tr 2.table，tr th td 都是块元素 tabl
html表格（table）
weixin_46191548的博客
01-26 8391
表格标签： table：是整个表格的框架。 tr：单元行。 td：单元格。 table，tr，td三者的关系：td<tr<table，这里没有列的概念。 th：表头，如果有需要的话，表格的第一行替代所有的td。 caption：表格的标题，写在table之中，tr之前。 合并单元格： rowspan：垂直合并（跨列），占用下一行的一个单元格 colspan：水平合并（跨列），在本行自身...
HTML【详解】表格 table 标签（table的属性，语义化表格，简易表格，合并单元格）
朝阳39的博客
07-05 1151
html 中的表格<table>由行<tr>组成，每行由单元格<td>组成。所以表格是由行组成（行由列组成），而不是由行和列组成。table 标签，属于块级元素。
html table 表格
老段的CSDN的博客
08-17 446
html table 表格。
HTML基础：表格(table)系列标签详解
"这篇资料主要介绍了HTML中的表格(table)系列标签以及HTML的基础知识，包括HTML的概念、语法结构、标签类型和属性的使用。" 在HTML中，表格是一种强大的工具，用于展示结构化数据。表格由一系列标签组成，包括`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值