表格基础属性和例题

最新推荐文章于 2024-09-26 20:42:44 发布
最新推荐文章于 2024-09-26 20:42:44 发布 · 495 阅读 · 1
文章标签：

#HTML5 #新手 #表格

本文详细介绍了HTML表格的各种属性和使用技巧，包括如何设置表格样式、调整单元格间距、合并单元格以及利用表格进行网页布局的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--caption 表格标题头-->
<!--colaroup col（代表列） 更改列的属性-->
<!--thead 包裹表格标题-->
<!--tbody 包裹表格内容-->
<!--tfoot 包裹表格脚部-->
<!--选中移动 右移动tab 左移动 shift+tab-->
<!--table的属性
    1.border属性：
       给表格添加边框，当border数值变大，变的只有外层框，里面保持不变一直为1px
    2.bordercolor="red" 边框颜色
    3.width、height 边框的宽高
    4.cellspacing：单元格与单元格之间的距离.
      当cellspacing="0" 只会是单元格间隙为0 但不会合并边框线(为俩条线)
      表格边框线合并： style="border-collapse：collapse；"(为一条线)
      无需写cellspacing="0"
    5.cellpadding 每个单元格中的内容文本与边框线的距离(满足的情况下，只会在不满足的方向出现效果)
    6.align 表格在屏幕的左中右位置显示，left center right
    注意：给表格加上 align属性，相当于让表格浮动，会直接打破表格后面元素的原有排列方式
    7.bgcolor 背景色 效果和style="background-color：；"
    8.background ： background="img/....jpg"设置背景图片
     效果和style="background-image:url('');"(background-image:url('用单引号');)且背景会覆盖背景颜色
    -->
<table border="5" bordercolor="red"
       style="border-collapse:collapse;"
       cellpadding="5"
       background="../zuoye0314/2.jpg"
       width="500px" height="300px">
    <!--tr和td相关属性
        1.weight height 单元格的宽高
        2.bgcolor 单元格的背景颜色
        3.align left center right 单元格中的文字，水平对齐方式
        4.valign top center bottom 单元格中的文字，垂直对齐方式
        5.nowrap="nowrap"单元格中文字不换行

        注意：1.当表格属性和行列属性冲突时，以行列为准（近者优先）
             2.表格的align属性，是控制表格自身在浏览器的位置
             行列中的align属性，是控制文字在单元格中的水平对齐方式
             3.表格的align属性；并不影响表格中的文字的水平对齐方式，
             tr的align或者valign属性会影响一行中的所有单元格中的文字的水平的垂直的对齐方式
        -->
    <tr bgcolor="aqua" align="center" valign="top"><!--行-->
        <td nowrap="nowrap">手机充值手机充值手机充值手机充值手机充值手机充值手机充值手机充值手机充值</td><!--列-->
        <td>IP卡</td>
        <td>网游</td>
    </tr>
    <tr>
        <td bgcolor="#7fff00">移动</td>
        <td>联通</td>
        <td>魔兽</td>
    </tr>
</table>
<table border="1" bordercolor="red"
       style="background-color:yellow;"
       align="center"
       width="500px" height="300px">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <!--colspan跨列   rowspan 跨行(第一个tr写了之后，后面的跨行就不需要再写哪一行所在)-->
        <th colspan="3">成绩</th>

    </tr>
    <tr>
        <td>1001</td>
        <td rowspan="3">张三</td>
        <td>100</td>
        <td>120</td>
        <td>100</td>
    </tr>
    <tr>
        <td>1001</td>
        <td>100</td>
        <td>120</td>
        <td>100</td>
    </tr>
    <tr>
        <td>1001</td>
        <td>100</td>
        <td>120</td>
        <td>100</td>
    </tr>
</table>
<hr>
<table border="1" align="center" width="500px"height="300px">
    <tr>
        <td colspan="4">1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td colspan="2">1</td>
        <td colspan="2">2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td colspan="3">1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<hr>
<table border="1"align="center" width="500px"height="300px">
    <tr>
        <td rowspan="2">1</td>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
<hr>
<table border="4"align="center" width="500px"height="300px"
       style="border-collapse: collapse"border-color="red"
       >
    <tr>
        <td rowspan="6">1</td>
        <td rowspan="3">2</td>
        <td rowspan="2">3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
    <tr>
        <td rowspan="2">3</td>
        <td>4</td>
    </tr>
    <tr>
        <td rowspan="3">2</td>
        <td>4</td>
    </tr>
    <tr>
        <td rowspan="2">3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
</table>
<table border="4"align="center" width="500px"height="300px">
    <tr>
        <td colspan="2">1</td>

    </tr>
    <tr>
        <td rowspan="4">1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
</table>
常用布局
<table width="500" align="center">

    <colgroup style="background-color: red;"> <!--前两列为一组-->
        <col/> <!--第一列-->
        <col/> <!--第二列-->
    </colgroup>
    <col style="background-color: blue;"/> <!--第三列-->

    <caption>表格标题</caption>

    <thead>
    <tr>
        <th>头1</th>
        <th>头2</th>
        <th>头3</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    </tbody>

    <tbody>
    <tr>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td>尾1</td>
        <td>尾2</td>
        <td>尾3</td>
    </tr>
    </tfoot>

</table>

</body>
</html>
「HTML和CSS入门指南」td 标签详解
a451319296的博客
06-06 4706
td 标签是一个重要的标签，用于在表格中创建普通的数据单元格。在使用 td 标签时，请注意选择正确的属性和方法、跨列和跨行以及避免兼容性问题。
【网页前端设计HTML】表格
weixin_53597021的博客
07-14 1827
表格的主要作用表格的基本语法⭐表格的主要作用表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。总结：表格不是用来布局页面的,而是用来展示数据的。如图所示：⭐表格的基本语法。
HTML——单元格标签<td>的属性
时光·漫步的博客
04-28 1万+
1.  设置单元格的大小在默认情况下，单元格的大小会根据单元格中的内容自动调整，也可以手动设置表格的宽度和高度。语法：    &lt;td width=value  height=value&gt;        height:  设置单元格的高度。2.  设置单元格的水平对齐属性功能：    在水平方向上，设定单元格的对齐方式，分别有居左、居中、居右。语法：    &lt;td  align=v...
HTML标签（三）
最新发布
2301_81364838的博客
09-26 2040
</ol>中只能嵌套<li></li>，直接在<ol>标签，一般在第一行。②<tr>
<td>标签中的属性
用心，努力，思考。
07-12 8066
1、colspan：表示横跨几列的表格<table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td colspan="2">January</td> </tr> <tr> <td colspan="2">February</td> </tr> </table>2、n
html中colspan属性含义,colspan属性, 要如何用
weixin_32460203的博客
06-04 1万+
colspan属性, 要怎么用?Data1Data2Data3colspan,是什么?要怎么用?有什么功能?为什么第一个有效,而第二个会无效??------解决方案--------------------htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml...
MySQL基础教程：第二至第七章的例题与课后练习
根据提供的文件信息，可以推断出该文件内容主要涉及MySQL数据库的使用，特别是在2至7章范围内的例题和课后练习。MySQL是一种广泛使用的开源关系数据库管理系统（RDBMS），它根据标准化的SQL（Structured Query ...
软件工程例题
01-06
在软件工程领域，构建数据字典是一项重要的任务，它帮助我们清晰地定义数据元素的结构和属性，确保系统设计的一致性和准确性。给定的例题描述了一个旅馆电话服务系统的数据流条目定义。电话号码作为关键数据项，被...
数据库原理课件介绍了数据库的一些基础知识,有浅到深,再有一些简单的例题和例题的原理
10-11
综上所述，数据库原理课件将引导学习者逐步理解数据库的基本概念、设计方法和操作技巧，通过例题和原理的解析，帮助他们掌握实际应用中的问题解决能力。这些知识对于从事软件开发、数据分析或其他涉及数据处理的工作...
数据库范式理解例题(推荐文档).doc
05-10
- **示例**：在第二范式的基础上，进一步分解表以消除传递依赖，例如将教师信息和课程信息分开存储。 通过以上对数据库范式的详细解释，我们可以清楚地看到如何通过不同的范式来优化数据库设计，以减少数据冗余、...
td 属性 noWrap 防止折行、撑开(及其它文字换行问题)
leafgw的专栏
03-18 1052
http://www.cnblogs.com/rinack/p/3532021.html 我用为td中noWrap属性来防止td数据折行 td class="text_left" noWrap="noWrap">${msg.cspName} td> 解决问题期间查询了些网络资料，以备后用 td中的nowrap url：http://linder0209.j
2019年最新1+x 证书 Web 前端开发初级理论考试模拟题（含答案 ）
Zeus
12-25 2万+
1+x 证书 Web 前端开发初级理论考试（试卷10 ） 官方QQ群  共55道题 总分：200分 形考总分：0分 一、单选题共30题，60分 1.以下说法正确的是： D Atable的表单标签 Btd的代表行 Ctr代表列 Dtable是表格标签 2.在javascript中，执行结果正确的是： B Atypeof(null)的结果为null Btypeof(typeof(5))...
前端HTML<table>标签的属性和使用
热门推荐
冯小东
10-05 4万+
1.什么是表格&表格的作用 什么是表格：由一些 被称之为 单元格的矩形框 按照从左到右从上到下的顺序排列到一起组成的 表格的作用：以一定的结构来显示信息的。  2.如何使用表格 定义表格： 创建表行： 创建列(单元格):  注意：默认情况下，每行中的列数是统一的。 table : display:table; 特点： 1、独占一行 2、宽度自适应(
表格，表单的基础标签和属性
baijiao1314的博客
09-11 1849
创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下： 单元格内的文字 在上面的语法中包含三对HTML标签，分别为 、、，他们是创建表 格的基本标签，缺一不可，下面对他们进行具体地解释 1.table用于定义一个表格。 2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就...
html5表格标签
ztt0918的博客
03-20 620
html> html lang="en"> head> meta charset="UTF-8"> title>title> head> body> 快捷键的使用 tab:选中的内容右移 按住shift+tab:选中的内容左移--> table表格标签： 1.border:给表格添加边框。当属性值增大时，只有外围框线增加，单元格的边框始终px
Oracle 创建表 练习题
于大大大洋
12-05 5166
a)       建立下列教学管理用的数据表。注意，表名和字段名都是英文。 学生表（student） 字段 名称 数据类型 约束 学号 S_NO CHAR(6) 主键 姓名 S_NAME CHAR(10)
掌握SAS编程：精选例题与代码下载
在SAS学习过程中，例题和代码是至关重要的学习资源，它们可以帮助学习者通过实践来掌握SAS的各种功能和应用。以下是SAS课程学习中可能会涉及到的一些核心知识点和技能： 1. 数据步（Data Step）和过程步（Procedure...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值