html表格相关元素

最新推荐文章于 2022-08-19 15:17:39 发布
最新推荐文章于 2022-08-19 15:17:39 发布
阅读量249 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/atu1111/article/details/108044255
版权

表格相关元素

  表格相关元素定义：


    <table.../> 元素只能包含0个或1个<caption.../>子元素(定义表格标题)
                        只能包含0个或1个<thead.../>子元素(定义表格头)
                        只能包含0个或1个<tfoot.../>子元素(定义表格脚)
                        多个<tbody.../>子元素(定义表格体)
                        多个<tr.../>子元素(定义表格行)
                    有以下几个属性：
                    1.cellpadding:指定单元格内容和单元格边框之间的间距
                    2.cellspacing:指定单元格之间的间距
                    3.width:指定表格的宽度 即可是像素值也可是百分比
                    4.border:规定表格边框的宽度。
                     html5建议cellspacing 和 width 等属性放到css中定义
        <tbody.../>元素,只能包含<tr.../>元素 
        <thead.../>元素,用法和 <tbody.../>元素大致一样    
        <tfoot.../>元素,用法和 <tbody.../>元素大致一样           
        <tr.../> 元素 该元素只能包含<td.../>和<th.../>两种元素
        <td.../> 元素 定义单元格和<div.../>元素一样，可以包含任何元素，包括在<td.../>元素在插入<table.../>元素
                   有以下几个属性：
                   colspan:指定单元格可以跨多少列
                   rowspan:指定单元格可横跨多少行
                   height:指定该单元格的高度 即可是像素值也可是百分比
                   width:指定该单元格的宽度 即可是像素值也可是百分比
                   html5建议 height 和 width 放到css中定义
        <th.../> 元素 定义表格页眉的单元格，和<td.../>元素基本一模一样，只是浏览器呈现<th.../>元素有点差别
        <col.../>元素 该元素用于为表格中的一个或多个列指定属性值。该元素只能出现在<table.../>元素或<colgroup.../>元素中
                  有span属性指定该列可横跨多少列
        <colgroup.../>元素 该元素的作用是组织多个 <col.../>元素，当使用<colgroup.../>元素组织多个 <col.../>元素，<colgroup.../>元素上指定的属性将对它所包含的<col.../>元素起作用

  示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
      /* table , table tr th , table tr td{ border: black solid 1px;} */
      /* 如果仅仅设置了边框是1像素，没有指定颜色和线的类型。只占用了空间而没有显示出来
         dashed 虚线
         solid 实线
      */

        table {border-collapse: collapse; }  
        /* 
            <table.../> 元素 cellpadding属性可以使用css中的内边距属性代替。
            border-collapse:collapse; 
            border-collapse中的collapse和duseparate值，定义为collapse时，边框会重叠在一起。定义为separate时单元格边框之间会有间隙。不定义时默认为separate
         */
 
    </style>
</head>
<body>
    <!-- 
        
        <table.../> 元素只能包含0个或1个<caption.../>子元素(定义表格标题)
                        只能包含0个或1个<thead.../>子元素(定义表格头)
                        只能包含0个或1个<tfoot.../>子元素(定义表格脚)
                        多个<tbody.../>子元素(定义表格体)
                        多个<tr.../>子元素(定义表格行)
                    有以下几个属性：
                    1.cellpadding:指定单元格内容和单元格边框之间的间距
                    2.cellspacing:指定单元格之间的间距
                    3.width:指定表格的宽度 即可是像素值也可是百分比
                    4.border:规定表格边框的宽度。
                     html5建议cellspacing 和 width 等属性放到css中定义
        <tbody.../>元素,只能包含<tr.../>元素 
        <thead.../>元素,用法和 <tbody.../>元素大致一样    
        <tfoot.../>元素,用法和 <tbody.../>元素大致一样           
        <tr.../> 元素 该元素只能包含<td.../>和<th.../>两种元素
        <td.../> 元素 定义单元格和<div.../>元素一样，可以包含任何元素，包括在<td.../>元素在插入<table.../>元素
                   有以下几个属性：
                   colspan:指定单元格可以跨多少列
                   rowspan:指定单元格可横跨多少行
                   height:指定该单元格的高度 即可是像素值也可是百分比
                   width:指定该单元格的宽度 即可是像素值也可是百分比
                   html5建议 height 和 width 放到css中定义
        <th.../> 元素 定义表格页眉的单元格，和<td.../>元素基本一模一样，只是浏览器呈现<th.../>元素有点差别
        <col.../>元素 该元素用于为表格中的一个或多个列指定属性值。该元素只能出现在<table.../>元素或<colgroup.../>元素中
                  有span属性指定该列可横跨多少列
        <colgroup.../>元素 该元素的作用是组织多个 <col.../>元素，当使用<colgroup.../>元素组织多个 <col.../>元素，<colgroup.../>元素上指定的属性将对它所包含的<col.../>元素起作用
           
    
    -->
    
    <table border="1" cellpadding = "50" cellspacing ="30">
    <!--  cellpadding，cellspacing都是废弃的属性了，html5已不推荐使用 -->
       <colgroup style="background-color: cadetblue;">
            <col style="width: 260px;">
            <col style="width: 50px" span="2">
       </colgroup>
        <thead>
            <tr>
                <th>书名</th>
                <th>作者</th>
                <th>价格</th>
            </tr>
        </thead>
         <!-- thead 一般用作标题行 -->
        <tbody>
            <tr>
                <td>疯狂java系列</td>
                <td>李刚</td>
                <td>39</td>
            </tr>
            <tr>
                <td>疯狂python系列</td>
                <td>李刚</td>
                <td>30</td>
            </tr>
            <tr>
                <td>疯狂android系列</td>
                <td>李刚</td>
                <td>20</td>
            </tr>
            <tr>
            <td>疯狂html5+css3+js系列</td>
                <td>李刚</td>
                <td>50</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">
                    现总计：3本图书
                </td>
                <!--  不能<tr> 现总计：3本图书</tr>  使用colspan 属性-->
            </tr>
        </tfoot>
        <!-- tfoot 一般用作统计行 -->
    </table>
</body>
</html>

  展示效果：

在这里插入图片描述

闲人不梦卿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html常用元素之表格元素
yin_991的博客
10-25 7981
html常用元素之表格元素及其属性
html表格中包含什么元素,html中表格元素属性
weixin_39918128的博客
06-11 911
table标签定义html表格。简单的html表格由table元素以及一个或多个tr th 或td元素组成tr行th表头td元素单元格table 标签属性align：规定表格相对周围的对齐方式，left/center/rightborder:变宽宽度单位为pxwidth :px或%frame:规定表格外侧的哪个部分见取值如下void 不显示外侧边框above 显示上部的外侧边框below 显示下部...
表格相关元素
Miss Z的博客
08-19 441
表格是在网页设计中经常使用的表现形式，表格可以储存更多内容，可以方便地传达信息
HTML表格相关元素
weixin_33889245的博客
10-31 122
　　<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。 　　table标签除了具有html元素中通用的属性外，还...
HTML的10个表格相关标记
09-28
以下是对HTML表格相关标记的详细说明： 1. `<caption>`：定义表格的标题，通常位于表格上方，提供对表格内容的简短概述。 2. `<col>`：允许为表格的一列定义样式，如宽度或背景颜色。可以单独使用，也可以配合`...
HTML5访问表格元素
11-22
用Html5编写的表格，并能访问其中的标题，单元格的数据。
详解HTML表格|l-639642.pdf
11-20
HTML表格是网页设计中用于展示数据的重要元素，它允许我们以结构化的方式排列和组织信息。下面将详细解析HTML表格的各个组成部分、属性以及最佳实践。 1. **基本表格结构**： HTML表格由`<table>`标签开始，用于...
HTML5制作表格样式
09-27
`<table>`元素是表格的容器，`<thead>`表示表头，`<tbody>`表示表格主体，`<tfoot>`表示表尾。例如： ```html 列1 列2 行1，单元格1 行1，单元格2 行2，单元格1 行2，单元格2 总计...
2022年HTML相关知识点表格标签.pptx
最新发布
11-02
* 标签用于定义一个表格元素，一个表格元素，是由数个横行（）、单元格（）与表头单元格（）子元素所组成。 * 标签用于定义表格内的表头单元格，此单元格中的文字将以粗体的方式显示。 * 标签用于定义表格的行元素。...
全国计算机等级考试二级教程--python语言程序设计（2018年版）第七章：数据组织的维度
sumjess
01-10 2万+
声明：本篇文章只是个人知识盲区、知识弱点、重点部分的归纳总结，望各位大佬不喜勿喷。梳理顺序是按照书籍的实际顺序梳理，转载请注明出处。 作者：sumjess   一、文件的使用： 1、文件的类型：       无论文件创建为文本文件或者二进制文件，都可以用“文本文件方式”和“二进制文件方式”打开，但打开后的操作不同。         一个文本文件a.txt，其内容为“全国计算机二级...
HTML--表格元素及相关样式
南风依旧
05-06 2274
文章目录HTML--表格元素及相关样式规则表格创建不规则表格 HTML–表格元素及相关样式 表格由<table> 标签来定义。每个表格均有指定行（由<tr> 标签定义），每行被分割为指定的单元格数量（由<td> 标签定义）。字母td指表格数据（table data），即数据单元格的内容。 规则表格 创建一个两行四列的表格 <!DOCTYPE html&...
table、tr、td表格的行、单元格等属性说明
weixin_44456333的博客
03-15 798
table、tr、td表格的行、单元格等属性说明 声明：本文为CSDN博主「sning999」的原创文章，原文链接：https://blog.csdn.net/u012724595/article/details/79400642 tr元素定义表格行，th元素定义表头，td元素定义表格单元格。 标签常见的可选属性有： align：规定表格相对周围元素的对齐方式，取值有left、center、right； border：规定表格边框的宽度，取值为像素； width：规定表格宽度，取值为像素或者百分
常见的表单元素有哪些？
qq_45651907的博客
10-13 885
1.input :标签用于搜集用户信息。 2.textarea标签定义多行的文本输入控件。 3.select:定义一个选择列表，即下拉列表。 option:定义下拉列表中的选项。
html5学习15：表格元素
八十岁老将的博客
02-07 2369
1、基本的表格 有三个元素是每个表格都必须要有的: table、tr和td。元素table，是HTML用以支持表格式内容的核心元素，它表示HTML文档中的表格。 1.1 table元素 属性：border 包含：caption,colgroup,thead,tbody,tfoot,tr,th,td 1.2 tr元素 父元素：table,thead,tfoot,tbody 内容：td,th 1.3 td元素 属性：colspan,rowspan,headers <table> <tr
HTML表格（table、tr、td、th、thead、tbody、tfoot标签）
热门推荐
拾Miss~博客
03-12 3万+
目录 HTML表格 table表格属性 ***HTML表格** <!DOCTYPE html> <html> <head> <title>表格</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </hea...
HTML表格及元素
成长日记的博客
06-25 731
标签 <table>...完整代码见示例</table> 作用 布局，呈现需要表格布局的内容 1.表格标签是块级元素 2.全页布局的作用已经退出舞台了 3.专注于自己应该专注的布局领域 4.表格样式 <!DOCTYPE html> <html lang="en"> <head> <meta chars...
html表格中可以包含哪些元素,表格table元素HTML中DOM操作表格的属性和方法
weixin_35172689的博客
07-03 624
表格table元素是HTML中最复杂的结构之一。要想创建表格，一般都必须涉及表示表格行、单元格、表头等方面的标签。由于涉及的标签多，因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码。本文将详细介绍DOM操作表格的属性和方法属性和方法显然DOM代码很长，为了方便构建表格，HTML DOM为、、元素添加了属性和方法。1、为元素添加的属性和方法caption:保存着对元素的指针tBodi...
HTML表格元素汇总
tangtian_yes的博客
03-26 401
HTML—表格 1、表格的基本结构 <table>标签用来创建表格，<tr>标签用来创建行，<td>标签用来创建列。 border属性表示给表格添加边框，它的值5表示边框的宽度为5px。 2、表格的属性——宽、高 使用width和height来定义表格的宽和高，width和hegiht单位是px，可加可不加。width和height的值还可以是百分比（%），这样表格就可以随着文档宽高的变化而变化。 3、表格的属性——cellpadding 属性cellpadd
常见的表单元素有哪些？各有什么属性？
IT修真院：初学者转行到互联网的聚集地
05-28 3340
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【常见的表单元素有哪些？各有什么属性？ 】 大家好，我是IT修真院北京分院第23期学员。今天小课堂的主要内容是，input表单的应用，还有在html5中新增的属性。 表单元素是允许用户在表单中(比如:文...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值