HTML表格(table)、框架(iframe)

您所在的位置:网站首页 表格美化的最后一步是修改边框属性吗 HTML表格(table)、框架(iframe)

HTML表格(table)、框架(iframe)

#HTML表格(table)、框架(iframe)| 来源: 网络整理| 查看: 265

在前一篇博客中HTML的常用基础标签,重新复习了一遍html中的常用基础标签,这篇博客来学习一下比较复杂并且总要的几个标签。

1、表格(table) 1.1基本使用

在这里插入图片描述 表格由 标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 表格实例:

DOCTYPE html> table Monthly savings Month Savings January $100 February $50

在这里插入图片描述 注意:表格默认是没有边框的,在table标签中加入border="1"后才会有1px的边框,但是推荐在css中设置表格样式。

1.2表格跨行跨列

在td和th中添加rowspan和colspan属性可以实现表格的跨行和跨列。 实例:

DOCTYPE html> 菜鸟教程(runoob.com) 单元格跨两列: Name Telephone Bill Gates 555 77 854 555 77 855 单元格跨两行: First Name: Bill Gates Telephone: 555 77 854 555 77 855

在这里插入图片描述 table标签的cellpadding属性用于设置每个表格中内容的内边距。

table标签的cellspacing属性用于设置每个表格单元格之间的距离,默认并不是0,如果设置为0,则每个单元格之间由一条实线隔开。

DOCTYPE html> 跨行跨列的表格 未设置cellspacing和cellpadding: Name Telephone Bill Gates 555 77 854 设置cellspacing和cellpadding: Name Telephone Bill Gates 555 77 854

效果: 在这里插入图片描述

元素与 和 元素结合起来使用,用来规定表格的各个部分(表头、主体、页脚)。方便区分表格的部分,使表格的结构更加清晰,没有实际的含义。

2、框架(iframe)

这里的框架,并不是指vue.js、react.js等框架,而是“当前页面中嵌入其他页面”,通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。 基本语法:

其中URL是指其他网页的网址链接。 frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 “0” 移除iframe的边框:

DOCTYPE html> iframe

在这里插入图片描述 iframe与超链接a搭配使用,可以实现点击a标签,将a标签的目标页面显示在iframe中,但是iframe的name属性应该和a标签的target属性一致:

DOCTYPE html> iframe RUNOOB.COM

点击超链接后: 在这里插入图片描述 iframe配合a标签可以实现菜单的功能。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3