HTML文档基本结构
表格的基本结构
1.<table>
<table>...</table>标签用于在HTML中创建表格,它包含表名和表格本身内容的代码。表格里面包含行,行中包含单元格。
2.<tr>
<tr>...</tr>标签用于在表格中定义行,要嵌套在<table>标签中使用。多个行结合在一起就构成一个表格。表格的每一行都用<tr>标签,并用相应的</tr>标签结束
3.<td>
表格的每一行又有若干表格单元格,用<td>...</td>标签定义。td是”表格数据(table date)“英文缩写。<td>标签定义一个列,嵌套于<tr>标签内。border属性是最常用的属性,该属性指定边框的厚度,如果其值为0,则不显示边框。
4.用于创建表格的其他标签
(1)<caption>标签:用于定义表格的标题。该标签必须紧随<table>标签之后,且每个表格只能定义一个标题。通常将标题置于表格之上的居中位置。
(2)<th>标签:用于定义表格内的表头单元格,其显示文字效果通常采用粗体居中。<th>标签必须嵌套在<tr>标签内。
创建表格
创建表格语法:
<table>
<tr>
<td>单元格</td>
</tr>
</table>
创建表格一般分为3步:
第一步:创建表格标签<table>...</table>
第二步:在表格标签<table>...</table>里创建行标签<tr>...</tr>,可以有多个行。
第三步:在行标签<tr>...</tr>里面创建单元格标签<td></td>,可以有多个单元格。
表格的属性
1.用于设置表格的尺寸和框的属性
语法:<table width="表格宽度" height="表格高度" border="表格边框宽度"></table>
其中表格的高度,宽度可以用像素(px)来表示,也可以用百分比来表示(与浏览器窗口相比的大小比例)。表格边框宽度只能用像素来表示。
2.设置表格背景属性
(1)整个表格背景属性
表格背景包括表格表格的背景颜色和背景图像的设置,表格的背景颜色属性bgcolocr是针对整个表格的,表格的背景图像属性background也是针对整个表格的,背景图像会令表格更加美观
(2)表格单行背景
行的bgcolor颜色可以覆盖<table>的bgcolor或background属性。
bgcolor设置表格的背景颜色/background表格的背景属性
(3)单元格背景
单元格的bgcolor颜色可以覆盖行的bgcolor属性
3.设置对齐方式属性
目的:为了美观大方。
设置表格,行或列的对齐公式,修改align属性为right(右对齐),center(居中),left(左对齐),默认为”左对齐“
示例:
<table border="2" width="400" height="150" background=”img/x.jpg“>
<tr bgcolor="red" align="center">
<th>地点</th>
</tr>
</table>
跨多行和多列的表格
1.跨行和跨列表格的概念
有时可能要将多行或多列合并成一个单元格,即可以创建跨多列的行,或创建跨多行的列。colspan属性用于创建跨多列的单元格,rowspan属性用于创建跨多行的单元格。
2.跨多列的表格
跨多列指的是在水平方向上跨多个单元格,通过设置colspan来设置实现的。
3.跨多行的表格
单元格除了可以在水平方向上跨列,还可以在垂直方向上跨行,跨多行的表格是单元格子在垂直方向上跨多行,设置rowspan实现的。
表格的嵌套
嵌套的表格经常用于设计页面布局。
表格的综合示例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title> 表格的综合示例隔行变色</title><style>table{border:1px solid #0058a3;font-family: arial;border-collapse:collapse;font-size:14px;}caption{padding-bottom:5px;font:1.2em;font-weight: bold;background-color: #c7e5ff;}td{border:1px solid #0058a3;text-align:center;padding-top: 4px;padding-bottom: 4px;padding-right: 10px;}tr.altrow{background-color: #c7e5ff;}</style></head><body><table><caption>网址导航</caption><tr><td>百 度</td><td>新 浪</td><td>腾 讯</td><td>搜 狐</td><td>网 易</td><td>谷 歌</td></tr><tr class="altrow"><td>凤凰网</td><td>央视网</td><td>新华网</td><td>人民网</td><td>中国移动</td><td>中国政府网</td></tr><tr><td>人人网</td><td>开心网</td><td>新浪微博</td><td>汽车之家</td><td>4399游戏</td><td>太平洋电脑网</td></tr><tr class="altrow"><td>东方财富</td><td>中华英才网</td><td>中彩网</td><td>赛尔号</td><td>智联招聘</td><td>携程旅行网</td></tr><tr><td>QQ空间</td><td>赶集网</td><td>百姓网</td><td>淘宝网</td><td>搜房网</td><td>大众点评网</td></tr><tr class="altrow"><td>工商银行</td><td>当当网</td><td>中关村在线</td><td>苏宁易购</td><td>易车网</td><td>去哪儿网</td></tr></table></body>
</html>
运行结果
HTML文档基本结构相关推荐
- C++--深入分析MFC文档视图结构(项目实践)
1 必备基础知识概述 1.1 MFC 文档视图结构程序结构总揽 当我们使用 MFC AppWizard 生成一个 MFC 程序,选用所有默认的设置(当然也是 Multiple Documents ,本 ...
- MFC让文档/视图结构程序支持滚动条
MFC让文档/视图结构程序支持滚动条 2009-06-30 09:26要通过滚动条显示文档,还必须知道文档滚动到了什么位置:一旦用户拖动滚动条时要告诉视图改变在文档中 的位置.所有这些,由MFC的CS ...
- 文档视图结构下多视图间的控制
程序结构: 创建了一个基于CFormView的MFC文档视图结构的程序,并用CSplitterWnd将窗口分割为2列,左边显示默认创建CFormView视图,右边是CHtmlView视图. 在CFor ...
- 深入分析MFC文档视图结构(项目实践)
文档视图结构(Document/View Architecture)是MFC的精髓,也是Observer模式的具体实现框架之一,Document/View Architecture通过将数据和其表示分 ...
- 视图切换—多模板文档视图结构的应用
转自:http://www.winu.cn/htmls/208/065/ 一.概述 ①在一个MDI程序中,需要使用到不同类型的子窗口,而每种类型窗口有可能有很多个,对应不同的数据. 这时,可以使用多模 ...
- MFC之文档/视图结构应用程序
文档/视图结构应用程序 一.文档/视图结构分析 MFC 通过多个类提供了对程序框架的支持,使用这些类可以简单地实现文档/视图结构:其中主要包括以下五个类: 应用程序类(CWinAPP):是 MFC 程 ...
- MFC应用程序框架-文档/视结构
MFC应用程序框架-文档/视结构 1.MFC单文档应用程序结构 2.文档对象 2.1基类CDocument 2.2在应用程序中使用文档类的典型步骤 3.视的对象 3.1基类CView 3.2常用的CV ...
- 简述html文档基本结构,html概述及html文档基本结构
html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签 ...
- atitit 方便搜索的文档文章结构框架.docx 目录 1.1. 三种搜索模式 tree hash关键词模式 关联搜索,对应的三种索引 1 1.2. 好的标题规范与副标题 1 1.3. Tr
atitit 方便搜索的文档文章结构框架.docx 目录 1.1. 三种搜索模式 tree hash关键词模式 关联搜索,对应的三种索引 1 1.2. 好的标题规范与副标题 1 1.3. Tre ...
- html特殊字符PPT,HTML 文档的结构,标签,在 HTML 文档中插入特殊字符,创建超级链接.ppt...
HTML 文档的结构,标签,在 HTML 文档中插入特殊字符,创建超级链接 * 演示例子:TG4-Source文件夹中"超链接"用例 * 提问:(因为前面讲过),链接路径分为哪两类 ...
最新文章
- 如何找回由于IO设备错误移动磁盘的文件
- C语言20790内所有因子的和,长春市水污染控制指标的因子和聚类分析.pdf
- 面试中有哪些经典的数据库问题?
- java 文件inputstream_java – 如何在InputStream中接收多个文件并相应地处理它?
- linux设置开机自启 etc rt.d,Linux下禁止服务开机自启动
- 安卓button设置背景图_这些安卓源码调试技巧,不懂的人月薪绝对不过 30k !
- C# 将控件的Controls属性下的所有控件取出以便使用LINQ语句进行查询
- VC MFC列表视图(CListCtrl)控件
- 设计模式——策略模式详解
- 学习时有必要做思维导图吗?
- WeUI首页、文档和下载 - 专为微信设计的 UI 库 - 开源中国社区
- 王炸!!微软终于对 JDK 下手了…
- 世界主要国家地区英文名称,缩写代码
- 如何查看linux的日志
- nuxt.js 全局 js_使用nuxt js在vuetify js中进行高级颜色管理
- 输出乱码疑难杂症总结及解决方案
- webpy使用说明(二)
- Camera ITS当中的gain/shutter组合测试
- 取球游戏(C++)[堆]
- 安装Office OneNote 2007