（14）HTML&&CSS笔记（表格，iframe）

最新推荐文章于 2022-10-21 09:00:35 发布
最新推荐文章于 2022-10-21 09:00:35 发布
阅读量153 收藏
点赞数
分类专栏： HTML&&CSS 文章标签： HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoma_666/article/details/97394011
版权

1、table：定义标签的表格
table特殊情况：border="num"是自带的属性（指边框的宽度）！
表格简化内容：可以不加thead,tbody,tfoot,但是默认把所有的行与列都放到tbody里面去。
样式问题：th,td自带一个像素的内边距。

<body>
    <table border='1'>
        <!-- thead是表头 -->
        <thead>
            <tr>
                <!-- colspan合并列 -->
                <!-- th 表格的标题 -->
                <th colspan='4'>这个是1班的课程安排</th>
            </tr>
            <tr>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
            </tr>
        </thead>
        <!-- tbody表格的主体内容 -->
        <tbody>
            <!-- tr标签是定义表格的行 -->
            <tr><!-- 第一行 -->
                <td>第一行第一列</td>
                <td>第一行第二列</td>
                <td>第一行第三列</td>
                <td>第一行第四列</td>
            </tr>
            <tr><!-- 第二行 -->
                <td>第二行第一列</td>
                <td>第二行第二列</td>
                <td>第二行第三列</td>
                <td>第二行第四列</td>
            </tr>
            <tr><!-- 第三行 -->
                <td>第三行第一列</td>
                <td>第三行第二列</td>
                <td>第三行第三列</td>
                <td>第三行第四列</td>
            </tr>
            <tr><!-- 第四行 -->
                <td>第四行第一列</td>
                <td>第四行第二列</td>
                <td>第四行第三列</td>
                <td>第四行第四列</td>
            </tr>
            <tr><!-- 第五行 -->
                <td>第五行第一列</td>
                <td>第五行第二列</td>
                <td>第五行第三列</td>
                <td>第五行第四列</td>
            </tr>
        </tbody>
        <!-- tfoot表格的页脚 -->
        <tfoot>
            <th colspan="4">这周末不用上班~！~~</th>
        </tfoot>
    </table>
</body>

2、表格的属性
border-spacing：10px 20px; x方向的水平间隙 y方向的垂直间隙
border-collapse：collapse; 合并表格边框线

3、表格的特征
（1）每一个单元格会平分table的宽度；
（2）table决定整个表格的宽度；
（3）th标签自带默认的加粗以及水平居中，垂直居中的属性；
（4）td标签自带默认的水平居左，垂直居中的属性；
（5）表格文字样式多的情况下，分到的宽度也就比较多；
（6）table表格支持margin，padding；padding会受边框合并的影响；
（7）td支持padding但不支持margin；

4、合并表格
colspan 合并列
rowspan 合并行

    <style>
        *{
            padding:0;
            margin:0;
        }
        table{
            width:600px;
            height:300px;
            margin:auto;
        }
    </style>
<body>
    <table border='1'>
        <!-- thead是表头 -->
            <tr>
                <!-- colspan合并列 -->
                <!-- th 表格的标题 -->
                <th colspan="4">这个是1班的课程安排</th>
            </tr>
            <tr>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
            </tr>
            
        <!-- tbody表格的主体内容 -->
            <!-- tr标签是定义表格的行 -->
            <tr><!-- 第一行 -->
                <td>第一行第一列</td>
                <td rowspan="4">第一行第二列</td>
                <td>第一行第三列</td>
                <td>第一行第四列</td>
            </tr>
            <tr><!-- 第二行 -->
                <td>第二行第一列</td>
                <!-- <td>第二行第二列</td> -->
                <td>第二行第三列</td>
                <td>第二行第四列</td>
            </tr>
            <tr><!-- 第三行 -->
                <td>第三行第一列</td>
                <!-- <td>第三行第二列</td> -->
                <td>第三行第三列</td>
                <td>第三行第四列</td>
            </tr>
            <tr><!-- 第四行 -->
                <td>第四行第一列</td>
                <!-- <td>第四行第二列</td> -->
                <td>第四行第三列</td>
                <td>第四行第四列</td>
            </tr>
            <tr><!-- 第五行 -->
                <td>第五行第一列</td>
                <td>第五行第二列</td>
                <td>第五行第三列</td>
                <td>第五行第四列</td>
            </tr>
        <!-- tfoot表格的页脚 -->
            <th colspan="4">这周末不用上班~！~~</th>
    </table>
</body>

在这里插入图片描述

5、iframe 框架
内联框架：

  • src 路径
  • width 宽度
  • height 高度
  • scrolling 是否需要滚动条
    yes 需要
    no 不需要
  • frameborder 边框线
 <iframe src="http://www.tmall.com" frameborder="1" width='1000' height='1000' scrolling='no'></iframe>
沭瑾
关注
专栏目录
day11 表格 iframe内联框架
cpshow300的博客
08-04 175
表格结构 样式： <body> <table> <!-- 表头 --> <thead> <td>表头</td>/*也可以用th*/ </thead> <!-- 表身 --> <tbody> <td>表身</td>
Html5+Css3实现简单表格排版
isGt93的博客
10-02 2891
1.html5实现初步布局 CS 142 Project 1, Problem 1 --> --> Item Manufacturer Size Unit Price Quantity Total Price Corn Flakes Kellogg's 18 oz. 2.50 1 2.50 Solid White Tuna Starkist 5
03---HTML+CSS---列表、表格及iframe框架
池水深深的博客
01-23 185
一、列表 1、无序列表 ul> li>Coffeeli> li>Milkli> ul> 网页显示： Coffee Milk 相对于有序列表，用的比较多。 2、有序列表 ol> li>Coffeeli> li>Milkli> ol> 网页显示： Coffee Milk 3、定义列表 dl> dt>Coffeedt>
CSS中表格以及表单的属性以及运用
qq_65841721的博客
10-21 1589
css中表单和表格运用
HTML&CSS笔记
我佛很悲
11-20 1081
HTML&CSS笔记 此笔记为李立超老师网课内容
HTML&CSS入门：结构、表格与表单详解
"Day04 HTML&CSS课堂笔记主要围绕Web前端开发的基础知识展开，包括HTML和CSS语言的结构和元素。在这一天的学习中，学员们复习了HTML的常用标签，如`<ul>`和`<ol>`用于创建无序和有序列表，`<dl>`, `<dt>`, 和 `<dd>`...
HTML&CSS学习笔记 纯知识点版 (尚硅谷2019李立超版)
LiuKairui的博客
09-08 7766
此版为纯知识点无练习笔记版本 目录1. HTML基础1.1 网页的结构1.2 HTML中的"实体"1.3 meta 标签1.4 语义化标签1.7 列表1.8 超链接1.9 图1.10 内联框架1.11 音视频2. CSS基础2.1 CSS简介2.2 CSS基本语法2.3 CSS 选择器基础2.4 CSS的复合选择器2.5 关系选择器2.6 属性选择器2.7 伪类选择器2.8 `a`元素的伪类选择器2.9 伪元素选择器2.10 样式的继承2.11 样式的冲突与优先级问题2.12 长度单位2.13 颜色单位3
HTML/CSS笔记
小李的博客
10-11 482
思维导图 HTML 网页的基本结构 <!DOCTUPE HTML> 文档声明，声明当前文档版本 迭代 网页的版本 HTML4 XHTML2.0 HTML5 ... 文档说明 文档说明用来告诉浏览器当前的版本 进制 二进制 十进制 八进制 十六进制 字符编码 所有的数据在计算机中储存时都是以二进制形式存储的，文字也不例外。 所以一段文字在存储到内存时，都需要转换为二进制编码 当我们读取这段文字时，计算机会将编码
html+css学习笔记
hutongkoudemihu的博客
06-19 1028
HTML+CSS+Javascript=网页HTML:Hyper Text Markup language 超文本标记语言；定义网页中有什么。CSS:Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子。MarkDown:MD 文档格式标准 [toc]可以加目录w3c 万维网联盟，非盈利性的组织：w3c.org 为互联网提供各种标准XML 可扩展的标记语言：extension markup lanuage,用于定义文档结构的。html HTML是W3C组织定义的语言标准。HT
HTML表格(table)、框架(iframe)
小绵杨
01-28 3619
在前一篇博客中HTML的常用基础标签，重新复习了一遍html中的常用基础标签，这篇博客来学习一下比较复杂并且总要的几个标签。 1、表格（table） 1.1基本使用 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 表格实例： <!DOCTYPE h
使用iframe在网页中嵌入复杂表格
码农人生
03-31 2750
有些excel表格、有很多rowspan、colspan，而且格式非常多。 如果直接在html中手工实现，将花费很多时间。 一种快速的解决方案是：将excel中需要展示的表格拷贝到word中，再保存成htm格式，再嵌入到iframe中。 这样可以在不破坏原有页面格式的情况下展现复杂的excel内容。
关于表格及iframe
zb219的专栏
05-29 1433
overflow 对于溢出的调设置table-layout:fixed 表格固定宽度word-break:break-all; word-wrap:break-word;对于表格换行两个页面。主页面加IFRAME SCROLLING="YES"，子页面style=overflow:scroll;overflow-x:hidden> 滚动条设置控制插入页被框架覆盖的深度 marginwi
HTML表格，表单，内嵌框架:(三)
热门推荐
SenZendao的博客
09-05 1万+
自从开始学习编程之后，体重就飙升，除了吃饭睡觉就是学习，也不运动，一步一步走向油腻，我一定要保护好头发，我可不想早早秃了头。这篇就总结一下表格和表单都比较重要，但是个人认为表单更为重要一点，用的地方也很多。 HTML表格 表格常用标签 1、table标签：声明一个表格 2、tr标签：定义表格中的一行 3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元 表格...
解决在网页框架中，页面的样式表失效的方法
竹君子之家
08-31 4143
将原来的相对路径《LINK href="../css/css.css" type=text/css rel=stylesheet》改为《LINK href="《%=Request.ApplicationPath%》/css/css.css" type=text/css rel=stylesheet》 就可以了！
layui 数据表格 iframe_大数据架构基础知识
weixin_39727336的博客
11-04 322
介绍在使用数据获取业务价值的公司中，尽管您可能不会一直以数据科学技能为荣，但始终可以很好地管理数据基础架构。每个人都希望将数据存储在可访问的位置，妥善清理并定期更新。在这些低调但稳定的需求的支持下，数据架构师的薪水与数据科学家的薪资同样高，甚至更高。实际上，根据PayScale进行的薪酬研究(https://www.payscale.com/research/US/Country=Uni...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值