第15节 html表格的基本结构、属性和用法

最新推荐文章于 2024-04-29 22:26:37 发布
最新推荐文章于 2024-04-29 22:26:37 发布
阅读量799 收藏 1
点赞数
分类专栏： Html+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32895969/article/details/55049774
版权

表格的基本结构、属性和用法

<html>
    <head>
        <title>表格的基本结构、属性和用法</title>
    </head>
    <body>
        <!--表格的基本结构  table表格标签 border表格边框宽度（1像素） tr表格的行标签 td单元格标签 -->
        <h1 align= center>表格</h1>
        <!-- <center> -->
            <!-- <table border=1> -->
            <!-- <tr> <td>1行1列</td> <td>1行2列</td> <td>1行3列</td> <td>1行4列</td></tr> -->
            <!-- <tr> <td>2行1列</td> <td>2行2列</td> <td>2行3列</td> <td>2行4列</td></tr> -->
            <!-- <tr> <td>3行1列</td> <td>3行2列</td> <td>3行3列</td> <td>3行4列</td></tr> -->
            <!-- <tr> <td>4行1列</td> <td>4行2列</td> <td>4行3列</td> <td>4行4列</td></tr> -->
            <!-- </table> -->
        <!-- </center> -->

        <!--合并单元格 colspan属性左右合并单元格 rowspan属性上下合并单元格-->
        <center>
            <table border=1>
                <tr><td>11</td> <td>12</td> <td>13</td></tr>
                <!--水平合并-->
                <tr><td colspan="3">212223</td> 
                <tr><td>31</td> <td>32</td> <td>33</td></tr>
            </table>
        </center>
        <hr color=red>
        <center>
            <table border=1>
            <!--垂直合并-->
                <tr><td>11</td> <td rowspan="3">122232</td> <td>13</td></tr>
                <tr><td>21</td><td>23</td></tr>
                <tr><td>31</td> <td>33</td></tr>
            </table>
        </center>
        <hr color=red>
        <center>
            <table border=1>
            <!--垂直、水平合并-->
                <tr> <td rowspan=2 colspan=2>11122122</td>   <td>13</td></tr>
                <tr>  <td>23</td>   </tr>
                <tr> <td>31</td>  <td>32</td>  <td>33</td></tr>
            </table>
        </center>
        <hr color=red>
        <center>
            <table border=1>
            <!--表格中内容位置设置-->
                <tr> <td>11</td>  <td align=right>12</td> <td>13</td> <td>14</td></tr>
                <tr> <td>21</td>  <td align=center rowspan=2 colspan=2>22233233</td>  <td>24</td></tr>
                <tr> <td>31</td>   <td>34</td></tr>
                <tr> <td>41</td>  <td>42</td> <td align=rightl>43</td> <td>44</td></tr>
            </table>
        </center>

        <hr color=red>
        <!--bgcolor属性设置表格的背景色和边框颜色-->
        <center>
            <table border=1>
            <tr> <td bgcolor=red>1行1列</td> <td bgcolor=blue>1行2列</td> <td bgcolor=yellow>1行3列</td> <td bgcolor=green>1行4列</td></tr>
            <tr> <td bgcolor=red>2行1列</td> <td bgcolor=blue>2行2列</td> <td bgcolor=yellow>2行3列</td> <td bgcolor=green>2行4列</td></tr>
            <tr> <td bgcolor=red>3行1列</td> <td bgcolor=blue>3行2列</td> <td bgcolor=yellow>3行3列</td> <td bgcolor=green>3行4列</td></tr>
            <tr> <td bgcolor=red>4行1列</td> <td bgcolor=blue>4行2列</td> <td bgcolor=yellow>4行3列</td> <td bgcolor=green>4行4列</td></tr>
            </table>
        </center>
        <hr color=red>
        <!--cellpadding单元格内容距表格边框的距离(内边距) cellspacing相邻单元格边线的之间的距离(外边距)-->
        <center>
            <table  border=1 bgcolor="#CCCCCC" height="200" width="200" cellpadding="10"cellspacing="4">
            <tr align=center> <td>1行1列</td> <td>1行2列</td> <td>1行3列</td> <td>1行4列</td></tr>
            <tr align=center> <td>2行1列</td> <td>2行2列</td> <td>2行3列</td> <td>2行4列</td></tr>
            <tr align=center> <td>3行1列</td> <td>3行2列</td> <td>3行3列</td> <td>3行4列</td></tr>
            <tr align=center> <td>4行1列</td> <td>4行2列</td> <td>4行3列</td> <td>4行4列</td></tr>
            </table>
        </center>
        <hr color=red>
        <!--完整单元格的样式 行组（thead表格表头 tbody表格主体 tfoot表格脚注） th单元格的行头-->
        <center>
            <table width="400" border=1 bgcolor="#FFFFFF" align=center>
                <thead>
                    <tr bgcolor=green><th colspan="2">产品</th> <th colspan="2">描述信息</th></tr>
                </thead>
                <tbody align=center>
                    <tr bgcolor=green><td>公司</td><td>编号</td><td>用途</td><td>价格</td></tr>
                    <tr><th rowspan="2">大众</th><td>DZ_1</td><td>中端客户</td><td>100.00</td></tr>
                    <tr><td>DZ_2</td><td>低端客户</td><td>50.00</td></tr>
                    <tr><th rowspan="2">前沿</th><td>JT-1</td><td>高端客户</td><td>200.00</td></tr>
                    <tr><td>JY-2</td><td>中断客户</td><td>100.00</td></tr>
                </tbody>
                <tfoot align=center bgcolor=gray><tr><td>2</td><td>4</td><td>3</td><td>120.00</td></tr></tfoot>
            </table>
        </center>

    </body>
</html>

复制出来可以直接运行。。。

Simple-Coder
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5+CSS3+JavaScript网页设计8.zip
07-22
《精通HTML5 + CSS3+JavaScript网页设计》内容主要包括CSS3的基本语法和概念，设置文字、段落、图片、背景、表格、表单和菜单等网页元素的方法，以及CSS3滤镜的应用。重点介绍如何使用DlV+CSS3进行网页布局，注重...
HTML5_CSS3_JavaScriptWYSJ(jb51.net).rar
07-22
第1章 HTML5概述 ...第15章 Java Script对象编程 第16章 Java Script操纵CSS3 第17章 HTML5、CSS3和Java Script 第18章 HTML5绘制图形 第19章 HTML5中的音频和视频 第20章 地理定位、离线Wed应用和Web存储
HTML-表格标签及属性
qq_59950604的博客
01-03 1384
属性： 1、border：边框 2、cellspacing：单元格与单元格之间的距离！！0 3、cellpadding：单元格边框与内容之间的距离(一般不会使用) 4、width：宽度 5、height：高度 6、align：对齐方式（水平方向） 属性值： 1、左边：left 2、中间：center 3、右边：right ...
html中表格及属性
P3323197861的博客
07-16 445
html表格及属性
前端基础、HTML表格列表表单标签、表单控件、使用场景及代码
最新发布
atatsuki的博客
04-29 758
(定义项目/名字)和(描述每一个项目/名字)一起使用名词1名词1解释1名词1解释2
html表格有什么属性,一篇文章带你了解HTML表格及其主要属性介绍
weixin_42637593的博客
06-07 2022
一、定义一个HTML表格使用标签定义HTML表格。标签定义表中的每一行使用。使用标签定义表头。默认情况下，表标题是粗体和居中的。一个表的数据/单元使用 标签定义。FirstnameLastnameAgeJillSmith50EveJackson94> 注意: 元素是表的数据容器。它们可以包含所有的HTML元素; 文本、图像、列表、其他表格等。1. HTML表格 - 添加边框如果不指定表的边框...
HTML表格常用属性
weixin_46141875的博客
09-21 667
HTML表格常用属性 属性 取值 描述 align left、center、right 设置表格相对周围元素的对齐方式 bgcolor rgh(x,x,x)、#xxxxxx、colorName 设置表格的背景颜色 border 像素 设置表格边框的宽度 cellpadding 像素或百分比 设置单元格与其内容之间的距离 cellspacing 像素或百分比 设置单元格之间的距离 height 像素或百分比
html表格（table）的基本结构
weixin_44722237的博客
06-11 6343
表格的基本结构 调试软件:hBuilder 简单的html表格由table元素以及一个或者多个<tr>、<th>或<td>元素组成。<tr>元素定义表格的行，<th>元素定义表格的头，<td>定义表格单元格。 更复杂的表格可能包括caption、col、colgroup、thead、tfoot、tbody等元素。 <table>标签的属性 属性 属性值 说明 align left、cen..
Element实现表格嵌套、多个表格共用一个表头的方法
10-15
在本文中，我们将深入探讨如何使用Element UI库在Vue.js应用中实现表格嵌套和多个表格共用一个表头的功能。Element UI是一个流行的前端组件库，提供了丰富的UI组件，包括表格（Table）组件，用于创建复杂的表格布局...
js下为表格内部动态添加行的代码
10-29
首先，我们需要一个HTML表格结构作为基础。以下是一个简单的表格布局： ```html <td width="15%" rowspan="2" id="StructureLeft1">原始内容 <!-- 其他表格行 --> ``` 在这个例子中，`<table>`元素有一个`...
疯狂HTML 5+CSS 3+JavaScript讲义（第2版）+源代码
11-19
第15章　事件处理机制 497 15.1　事件模型的基本概念 498 15.2　绑定事件处理函数 499 15.3　事件处理函数的执行环境 505 15.4　事件类型 521 15.5　本章小结 534 第16章　本地存储与离线应用 535 16.1　Web Storage...
html表格属性
05-23
html表格属性，学习；你能通过这文档清楚了解html表格的用法！
关于HTML表格属性详解
ofshitao的博客
07-18 3653
表格 表格< table>标签中属性有 属性名 属性值 描述 align left、center、right 规定表格相对周围元素的对齐方式。（不推荐使用，用样式代替） bgcolor 颜色名字或颜色二进制代码 规定表格的背景颜色。（不推荐使用，用样式代替） border 1或者其他" " 规定表格单元是否拥有边框，默认为" "，表示没有边框。 cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素。 cellspacing 像素值 规定单元格
【HTML】HTML基础6.1（表格以及常见属性）
2301_79982543的博客
03-03 712
在浏览器中，我们经常见到形如这样的表格形式，一般来说，表格是为了让数据看起来更加清晰，增强数据的可读性有的程序员也会用表格进行排版该表格用到的知识点有①标签属性：align（center使得它居中）②单元格中可以插入多种类型的数据，比如链接③边框属性border可以通过调节数字实现粗细大小的设置④开头的一排加粗居中是因为运用到了th标签<th></th>把小标题放进去即可今天的分享到这里就结束啦~~希望能帮到您！
html 表格的属性及使用
weixin_51445423的博客
04-10 2655
html表格的属性
HTML—表格
Ywyyy231128的博客
11-14 4697
此外，thead、tbody和tfoot标签除了可以使代码更具有语义，还有另外一个重要作用 ：方便分块来控制表格的CSS样式。在HTML中，单元格其实有两种：一种是“表头单元格”，使用的是th标签；另一种是“表行单元格”，使用的是td标签。***一个表格只能有一个标题，也就是只能有一个caption标签。***分析：在默认情况下，表格是没有边框的。***说明：th和td在本质上都是单元格，但是并不代表两者可以互换，它们具有以下区别。***说明：在表格中，有多少组“",就表示有多少行。
HTML 表格基本属性
weixin_46146313的博客
01-17 242
表格 table：是真个表格的框架 tr：单元行 td：单元格 以上三者的关系、td在tr里tr在table里 th表头如果有需要的话表格的第一行替代所有的替代td、 caption表格的标题写在table里tr之前。 合并单元格：合并的本质不是侵占，在自身添加了位置 –rowspan垂直合并，在本行 –colspan水平合并，在自身下面 table border 边框的宽度 bordercolo...
html标签之表格标签，前端应用性能优化，【建议收藏】
m0_57472099的博客
03-19 1012
7）border-collapse样式属性：设置表格的边框是否被合并为一个单一的边框；
html表格的属性
zhangyubababa的博客
04-01 466
tr 是行 td是列 tr可以不用写什么属性 tr 和td 必须写在table 标签中 才会显示出 在tr或者td中 写的 css属性 只有td 和th(表头的列) 可以写 colspan 和rowspan 属性 跨行 跨列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont.
HTML5基础知识-HTML5表格与列表.pptx
05-06
行 列 1 <table border=”1”> </table> 表格 <tr> </tr> 数据行 <td>张三</td> <td> 男 </td> <td> 19 </td> 数据项 ？ 表格边框 1 有表 头 的 表 格 1 有标题的 表 格 属性 值 描述 align left/center/right 不赞成使用。请使用样式代替。 规定表格相对周围元素的对齐方式。 bgcolor rgb(x,x,x)/#xxxxxx/ colorname 不赞成使用。规定表格的背景颜色。 border pixels 规定表格边框的宽度。 cellpadding pixels % 规定单元边沿与其内容之间的空白。 cellspacing pixels % 规定单元格之间的空白。 width % pixels 规定表格的宽度。 2 2 bgcolor：规定表格的背景颜色 该属性可以用在<table>、 <tr>、 <td>、<th>元素中 表格背景 background：设置背景图片 该属性可以用在<table>、<td>、<th>元素中 如果在<table>中和<tr>中同时设置了背景色，<

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值