IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 使用HTML表格
表格在网站中应用得非常广泛,使用它可以方便、灵活地排版,很多动态大型网站也都是借助表格排版的,但现在都使用DIV+CSS进行页面布局。表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然。在HTML文档中,表格需要通过表格标记<table>、行标记<tr>、单元格标记<th>或<td>等标记按一定的关系嵌套共同完成,<tr>、<td>必须定义在<table>之间。表格的基本结构如下所示:
1.<table>标签
该标签用于定义一张表格。在一张最基本的表格中,必须包含一组<table>标签、一组<tr>标签和一组<td>或<th>标签。在<table>标签中,可以使用表4中给出的一些常用的可选属性。
表4 HTML中<table>标签的常用属性
2.<caption>标签
该标签用于定义表格标题的位置,可以由align和valign属性来设置。align属性设置标题位于文档的左、中或右;valign属性设置标题位于表格的上方或下方。默认属性是标题位于表格的上方中间位置。该标签应放在<table>标签内,在表格行标签<tr>之前。
3.<tr>标签
该标签定义一行标签。表格是按行和列组成的,一张表格由几行组成就要有几个行标签<tr>,一组行标签内可以建立多组由<td>或<th>标签所定义的单元格。行标签用它的属性值来修饰,属性都是可选的。例如,align属性设置行内容的水平对齐;valign属性设置行内容的垂直对齐;bgcolor属性设置行的背景颜色。
4.<th>和<td>标签
<th>和<td>都是插入单元格的标签,这两个标签必须嵌套在<tr>标签内,是成对出现的。<th>用于表头标签,表头标签一般位于首行或首列,标签之间的内容就是位于该单元格内的标题内容,其中的文字以粗体居中显示。数据标签<td>就是该单元格中的具体数据内容。<th>和<td>标签的属性都是一样的,可以使用表5中给出的一些常用的可选属性。
表5 表格列标签的常用属性
5.综合实例
在本例中使用表格在网页中输出一个学员信息列表,包括学员基本信息和学员成绩信息,代码如下所示:
本例在浏览器中的显示效果如图5所示。
图5 HTML表格标签演示结果
IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 使用HTML表格的更多相关文章
- IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 HTML基础标签
指引 网页中的信息主要是以文本为主的,可以通过字体.大小.颜色.底纹.边框等来设置文本的属性.文字版面的编辑包括文本标签和格式标签两种,在浏览器中显示的文字内容和格式都要在<body>标记 ...
- IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 小结及试题
小结 HTML标签包含结构标签和基础标签,基础标签是在页面制作最常使用的一些标签.基础标签包含标题标签(<h1>~<h6>).换行标签(<br>).段落标签(< ...
- IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 HTML框架结构
使用HTML框架结构可以把一个浏览器窗口划分为若干个小窗口,每个窗口可以显示不同的URL网页,每个框架里的网页相互独立.这样不仅可以非常方便地在浏览器中同时浏览不同的页面效果,而且可以非常方便地完成导 ...
- IT兄弟连 HTML5教程 HTML5的基本语法 简单HTML实例制作
现在学习HTML5的方式 目前HTML还处于HTML4与HTML5之间的过渡使用阶段.移动端的Web界面开发已经全面使用HTML5的技术,而在PC端由于用户升级浏览器周期较长,面临着页面的兼容性问题, ...
- IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作
学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...
- IT兄弟连 HTML5教程 HTML5和CSS3的关系
HTML5是第五版HTML的标准,CSS3则是第三版CSS,新增一些非常实用的选择器和样式属性,并且CSS3语言开发是朝着模块化发展的.以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为 ...
- IT兄弟连 HTML5教程 HTML5和HTML的关系
HTML5开发现在很火爆,是一门技术,更是一个概念.可以让我们的工作模式.交互模式以及对应用和游戏的体验有了翻天覆地的变化,很多人都知道HTML5这门技术,也常把HTML5读作H5(简称).其实一些外 ...
- IT兄弟连 HTML5教程 HTML5表单 小结及习题
小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们 ...
- IT兄弟连 HTML5教程 HTML5表单 H5表单提交综合实例
这里我们创建一个填写个人基本信息的表单,使用了表单元素有<input>输入框.<datalist>选项列表.<textarea>文本框,通用的表单输入类型有text ...
随机推荐
- python基础入门 整型 bool 字符串
整型,bool值,字符串 一.整型 整型十进制和二进制 整型:整型在Python中的关键字用int来表示; 整型在计算机中是用于计算和比较的 可进行+ - * / % //(整除) **(幂运算) 十 ...
- 带你了解Android Jetpack
1.Jetpack主要特性有以下三点: 1.加速开发组件可单独使用,也可以协同工作,当使用kotlin语言特性时,可以提高效率. 2.消除样板代码Android Jetpack可管理繁琐的Activi ...
- 配置Servlet 容器
SpringBoot默认使用Tomcat作为嵌入式的Servlet容器: 1.如何定制和修改Servlet容器的相关配置: 1.修改和server有关的配置(ServerProperties[也是Em ...
- 使用PHP生成并导出CSV文件
CSV文件是以纯文本形式存储的,一般以逗号为分隔符.这里主要简单介绍下如何导出CSV文件. 一.浏览器导出CSV文件格式 /** * 导出CSV文件 */ function exportCsv() { ...
- IT兄弟连 HTML5教程 CSS3属性特效 圆角
传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...
- Hive 性能测试工具 hive-testbench
下载: yum -y install gcc gcc-c++ maven 下载地址Github:https://github.com/hortonworks/hive-testbench/git cl ...
- 一步一步搭建 Oracle Data Guard
前言 为什么要写前言,因为我要吐槽一下.作为一个Java后端,搭建Oracle Data Guard真的是一件,嗯,既不专业也不擅长的事情,然而,为什么还是要我来弄? 因为DBA出差了,我们这边急着要 ...
- tomcat的jsp页面超过65535,导致500报错
错误信息 org.apache.jasper.JasperException: Unable to compile class for JSP: An error occurred at line: ...
- SQL server 2014 安装
一.规划并成功的完成SQLSERVER 2014的安装 1.规划系统 安装SQL server 前,第一步应该是合理的规划.以下是规划时的任务和要点: ① 当前工作负载的基准 ② 估计工作负载的增长情 ...
- winform删除dataGridView列报异常:System.IndexOutOfRangeException:“索引 7 没有值
winform界面如下: using System; using System.Collections.Generic; using System.ComponentModel; using Syst ...