表格的相关知识

最新推荐文章于 2021-12-16 20:02:48 发布
最新推荐文章于 2021-12-16 20:02:48 发布
阅读量363 收藏 7
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59641085/article/details/119029293
版权

表格

1.表格的创建

 2.表格的相关属性

宽度width
高度height
边框border
边框颜色bordercolor
背景颜色bgcolor
文字水平对齐align="left"或"right"或"center"
文字垂直对齐valign="top"或"middle"或"bottom"
单元格与单元格之间的间距cellspacing="单元格与单元格之间的间距",给table添加此属性
单元格与内容之间的间距cellpadding="单元格与内容之间的间距",给table添加此属性
合并单元格的列colspan="所要合并的单元格的列数"，合并列必须给td
合并单元格的行rowspan="所要合并的单元格的行数"，合并行必须给td

3.表格相关的CSS属性

表格相关的CSS属性

个数

用法

意义

说明

1

border-spacing:20px;

单元格间距

单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值

2

border-collapse:separate/collapse;

合并相邻单元格边框

合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)

3

empty-cells:show/hide;

无内容时单元格的设置

定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏；

4

table-layout:auto/fixed;

是否固定单元格的宽度

fixed：固定宽，没有定义时则宽度会平均分配，高度则会随内容变化

5

caption-side:top/right/bottom/left

表格标题位置

left,right位置只有火狐识别，top,bottom IE7上版本支持，ie7以下版本不支持其它属性值，只识别top

4.表格相关的HTML标签和属性

表格相关的HTML标签和属性

个数

用法

意义

说明

1

表格标题

<caption>标题内容</caption>

2

表格列分组
A. <colgroup span=" 数字 "></colgroup>
B. <col span=" 数字 " />
C. 如果用 rules 添加组分割线的话，列分组必须用 colgroup
A. col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组
B. span属性显示指定相邻几列组成一组，span属性值默认为1

3

表格行分组
A. < thead ></ thead > 表头
B. < tbody ></ tbody > 表体
C. < tfoot ></ tfoot > 表尾

4

添加组分隔线

rules="groups/rows/cols/all/none"

         必须给table标签添加属性

 5   表格的应用，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
    <style>
        td{
            width: 100px;
            height: 40px;
        }
    </style>
   
</head>
<body>
    <table border="1px"  align="center" cellspacing="0" width="800px">
        <tr>
            <td colspan="7" align="center">个人简历</td>
        </tr>
        <tr align="center">
            <td>姓名</td>
            <td></td>
            <td>性别</td>
            <td></td>
            <td>年龄</td>
            <td></td>
            <td rowspan="4"></td>
        </tr>
        <tr  align="center">
            <td>学历</td>
            <td></td>
            <td>籍贯</td>
            <td colspan="3"></td>
        </tr>
        <tr  align="center">
            <td>电话</td>
            <td></td>
            <td>政治面貌</td>
            <td colspan="3"></td>
        </tr>
        <tr  align="center">
            <td>毕业院校</td>
            <td colspan="5"></td>
        </tr>
        <tr  align="center">
            <td>求职意向</td>
            <td colspan="6"></td>
        </tr>
    </table>
</body>
</html>

代码运行后效果图如下：

表格的三部分，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的三部分</title>
    <style>
        thead{
            background: red;
        }
        tfoot{
            background: green;
        }
        table,th,td{
            border: 1px solid yellowgreen;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table width="400px" cellspacing="0">
        <!-- 
            head body footer
         -->
         <thead>
             <tr>
                 <th>我是标题</th>
                 <th>我是标题</th>
                 <th>我是标题</th>
                 <th>我是标题</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td>我是tbody</td>
                 <td>我是tbody</td>
                 <td>我是tbody</td>
                 <td>我是tbody</td>
             </tr>
             <tr>
                <td>我是tbody</td>
                <td>我是tbody</td>
                <td>我是tbody</td>
                <td>我是tbody</td>
            </tr>
            <tr>
                <td>我是tbody</td>
                <td>我是tbody</td>
                <td>我是tbody</td>
                <td>我是tbody</td>
            </tr>
         </tbody>
         <tfoot>
             <tr>
                 <td>我是tfoot</td>
                 <td>我是tfoot</td>
                 <td>我是tfoot</td>
                 <td>我是tfoot</td>
             </tr>
         </tfoot>
    </table>
</body>
</html>

效果图如下：

表格制作的应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格制作</title>
    <style>
        .no{
            border-left: none;
        }
        .no2{
            border-right: none;
        }
        .money{
            white-space: pre;
        }
    </style>
</head>
<body>
    <table border="1px" width="900px" height="288px" cellspacing="0" align="center">
        <tr align="center">
            <td colspan="2">姓名</td>
            <!-- <td></td> -->
            <td></td>
            <td>职务</td>
            <td colspan="2" width="50px"></td>
            <!-- <td></td> -->
            <td colspan="2" width="60px">出差事由</td>
            <td colspan="4"></td>
        </tr>

        <tr align="center">
            <td width="30px">起日</td>
            <td>止日</td>
            <td>起迄地点</td>
            <td>项目</td>
            <td width="30px">张数</td>
            <td colspan="3" width="90px">金额</td>
            <td>项目</td>
            <td>天数</td>
            <td colspan="2"></td>
        </tr>

        <tr align="center">
            <td width="30px"></td>
            <td width="30px"></td>
            <td width="60px"></td>
            <td width="60px">火车费</td>
            <td width="30px"></td>
            <td width="30px" class="no2"></td>
            <td width="30px" class="no"></td>
            <td width="30px"></td>
            <td width="60px">途中补助</td>
            <td width="30px"></td>
            <td width="60px"></td>
            <td width="30px"></td> 
        </tr>
        <tr align="center">
            <td width="30px"></td>
            <td width="30px"></td>
            <td width="60px"></td>
            <td width="60px">汽车费</td>
            <td width="30px"></td>
            <td width="30px" class="no2"></td>
            <td width="30px" class="no"></td>
            <td width="30px"></td>
            <td width="60px">住勤补助</td>
            <td width="30px"></td>
            <td width="60px"></td>
            <td width="30px"></td> 
        </tr>
        <tr align="center">
            <td width="30px"></td>
            <td width="30px"></td>
            <td width="60px"></td>
            <td width="60px">市内交通费</td>
            <td width="30px"></td>
            <td width="30px" class="no2"></td>
            <td width="30px" class="no"></td>
            <td width="30px"></td>
            <td width="60px">夜间乘车</td>
            <td width="30px"></td>
            <td width="60px"></td>
            <td width="30px"></td> 
        </tr>
        <tr align="center">
            <td width="30px"></td>
            <td width="30px"></td>
            <td width="60px"></td>
            <td width="60px">住宿费</td>
            <td width="30px"></td>
            <td width="30px" class="no2"></td>
            <td width="30px" class="no"></td>
            <td width="30px"></td>
            <td width="60px">其他</td>
            <td width="30px"></td>
            <td width="60px"></td>
            <td width="30px"></td> 
        </tr>
        <tr align="center">
            <td width="30px"></td>
            <td width="30px"></td>
            <td width="60px"></td>
            <td width="60px">邮电费</td>
            <td width="30px"></td>
            <td width="30px" class="no2"></td>
            <td width="30px" class="no"></td>
            <td width="30px"></td>
            <td width="60px">途中补助</td>
            <td width="30px"></td>
            <td width="60px"></td>
            <td width="30px"></td> 
        </tr>
        <tr align="center">
            <td></td>
            <td></td>
            <td></td>
            <td colspan="2">小计</td>
            <td colspan="2"></td>
            <td></td>
            <td colspan="2">小计</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3">合计</td>
            <td colspan="9" class="money">（大写）          仟         佰         拾         元         角         分 ￥：</td>
        </tr>
    </table>
</body>
</html>

 

 

 

 

紫色的贝壳～
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
表格与表单相关知识点总结
qq_51096686的博客
02-26 703
学习HTML中表格与表单的运用
3 表格
一个超可爱的账号
10-30 194
表格table 表格是一种常用的标签，但不是用来布局，常用来 显示、展示表格式数据。 因为它可以让数据显示的非常的规整，可读性非常好。 特别是后台展示数据的时候表格运用是否熟练就显得很重要。一个清爽简约的表格能够吧繁杂的数据表现得很有调理，虽然div布局也可以做到，但是总没有表格来的方便。 创建表格 创建表格的基本语法： <table> <tr> <td>表格内的文字</td> <td>表格内的文字</td> <t
初学者小白HTML表格基础知识
lbyzy的博客
11-28 204
文章目录 html表格： 一.基本结构 二.操作表格 三.表格属性 四.表格跨行跨列 五.表格嵌套 ————————————————————————————————————————
表格标签
花&败
01-27 1557
1.简介 现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。 特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。 2.创建表格 table、tr、td，他们是创建表格的基本标签，缺一不可 table用于定义一个表格标签。 tr标签 用于定义表格中的行，必须嵌套在 table标签中。 td 用于定义表格中的单元格，必须嵌套在<tr...
表格基础知识与应用
Shmily____的博客
07-09 591
给大家分享一些关于表格的基础知识和一些简单的应用先带大家了解一下表格的基础知识： 定义表格：&lt;table&gt; 表格标题：&lt;caption&gt;表格表头：&lt;thead&gt;表格正文：&lt;tbody&gt;表格页脚：&lt;tfoot&gt;表头单元格：&lt;th&gt;表格行：&lt;tr&gt;表格单元格：&lt;td&gt;表
2022年HTML相关知识点表格标签.pptx
11-02
2022年HTML相关知识点表格标签.pptx
2022年HTML相关知识点表格标签(1).pptx
11-02
2022年HTML相关知识点表格标签(1).pptx
AngularJS基础知识笔记之表格
10-24
主要介绍了AngularJS基础知识笔记之表格的相关资料,需要的朋友可以参考下
民主评议有关表格知识.pdf
02-14
民主评议有关表格知识.pdf
TableLayout(表格布局)基础知识点详解
08-26
在本文里我们给大家分享了关于TableLayout(表格布局)的相关基础知识点内容，需要的朋友们学习下。
表格一些知识点
幻影
03-23 489
1、colspan—  跨多列  2、窗口中正常情况下只能显示一个网页，采用帧可以将窗口分隔出多个窗口，每个窗口对应一个html文件 Frame --> --> HTML中target属性的4个内定名称 _blank，表示新开启一个浏览器窗口 _self，此属性为默认属性，在当前窗口显示 _parent，表示在当前窗口的直接父帧
表格基础知识-表格标签（一）
进击的前端小白
05-26 883
最近一直在做表格，所以准备把表格的相关知识总结下1.表格的结构&lt;table border="" cellspacing="" cellpadding=""&gt;    &lt;thead&gt;     &lt;tr&gt;      &lt;th&gt;Header&lt;/th&gt;     &lt;/tr&gt;    &lt;/
电子表格计算机知识,EXCEL电子表格基本知识.doc
weixin_29585753的博客
06-24 1338
Excel电子表格Excel电子表格1，启动Excel(与Word应用程序在一起)2，界面组成a)标题栏、菜单栏、工具栏、状态栏(与Word的界面相同)b)名称框和编辑栏(这是EXCEL特有的)3，Excel的一些术语a)工作薄、工作表(工作薄好比是一本书，而工作表好比是书中一页纸，默认情况下，一个工作薄中默认包含三个工作表)b)单元格(Excel电子表格是由行和列构成的表格，行用数字1,2,3,...
table表格基础知识及简单运用
热门推荐
weixin_43183219的博客
12-16 1万+
了解table的基础知识，制作简单的table表格
布局表格
m0_52346373的博客
01-20 129
table标签 布局表格最基本的标签。 1.包含属性： border 可取值1 ， 2 width 设置表格的宽度 2.tr 行标签 3. td 列标签 都可是高度和宽度。 想要在表格内添加文本内容，要在列标签中添加。 列标签中colspan属性可实现行的合并。 灵活的应用table的嵌套，行列属性的设置，``可实现表格布局。 <table border="2" width="900"> <tr height="100"> <td col
HTML2
W87234331的博客
01-02 160
例子1 <html> <body> <h1>英雄联盟（电子竞技类游戏）</h1> <p> <strong>《英雄联盟》</strong>（简称lol）是由美国<i>Riot games</i>开发， 中国...
table表格宽带width属性研究
Yocannnnn的博客
06-14 4436
        今天在开发过程中有利用到table中的width属性，涉及百分比和像素，由于对width内部属性的不明确，导致表格的数据展示不完美，闲下来自己捣鼓，所以才有这份研究，仅作为个人成长记录，以及提供参考    情况分析：      1.在table设置width值固定的情况下，不考虑字符宽带带来的影响： ①如果td width之和不超过table width值（代码如下）：&lt;ta...
vertical-align的几个注意点
qq_24724109的博客
11-16 171
vertical-align 参考博文 1. vertical-align生效场景 元素本身的display设置为inline 或者 inline-block 2. 通过vertical-align实现居中 vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中...
表格标签相关
匿名攻城狮
06-17 900
(1)创建表格; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <h3>这是 一个三行三列的表格</h3> <table width="500" height="3...
用表格整理Redis GEO的知识
最新发布
06-10
以上是 Redis GEO 常用的命令和功能，可以用来实现地理位置相关的场景，比如附近的人、地点推荐等。其中，GEOADD、GEOPOS、GEODIST、GEOHASH 是最基础的四个命令，其他命令都是在这四个命令的基础上扩展的。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值