<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

　　table标签除了具有html元素中通用的属性外，还含有自己的属性，常用属性如下：

bgcolor：规定表格背景颜色。

cellpadding：规定单元边沿与其内容之间的空白。

cellspacing：规定单元格之间的空白。

frame：规定外侧边框的哪个部分是可见的。从实用角度出发，最好不要规定 frame，而是使用 CSS 来添加边框样式。

rules：规定内侧边框的哪个部分是可见的。

summary：规定表格的摘要。

width：规定表格的宽度。如果没有设置 width 属性，表格会占用需要的空间来显示表格数据。

　　1、<caption>标签

　　　　<caption>标签用于定义表格标题，该元素可以包含文本、图片、超链接、文本格式化元素和表单控件元素。

　　2、<thead>标签

　　　　<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

常用属性如下：

align：定义 thead 元素中内容的对齐方式。

char：规定根据哪个字符来进行文本对齐。

charoff：规定第一个对齐字符的偏移量。

valign：规定 thead 元素中内容的垂直对齐方式。

　　3、<tbody>标签

<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。常用属性与<thead>标签相同。

但需要注意的是，<tbody../>元素中，必须使用<tr.../>子元素来定义表格行，<tbody.../>元素本身并不会生成任何输出内容。

　　 4、<tfoot>标签

<tfoot> 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。常用属性与<thead>标签相同。

<thead.../>、<tfoot.../>、<tbody.../>元素可以让我们对表格中的行进行分组，每个<tbody.../>就是一组，可以有多行。除此之外，当创建某个表格时，也许希望有一个标题行，可以是多个数据行组成的组，以及位于底部的一个统计行。这样可以让浏览器能对表格标题和页脚之间的表格内容进行滚动。

例如如下代码：

<body>

    <table style="width:400px" border="1">

        <caption>效果实例</caption>

        <thead>

            <tr>

                <th>&nbsp;</th>

                <th>书名</th>

                <th>作者</th>

            </tr>

        </thead>

        <tfoot>

            <tr>

                <td colspan="3" style="text-align: right">现总计：4本图书</td>

            </tr>

        </tfoot>

        <tbody>

            <tr>

                <th rowspan="2">计算机类图书</th>

                <td>C++面向对象程序设计</td>

                <td>陈维兴</td>

            </tr>

            <tr>

                <td>计算机网络</td>

                <td>谢希仁</td>

            </tr>

        </tbody>

        <tbody>

            <tr>

                <th rowspan="2">计算机类图书</th>

                <td>C++面向对象程序设计</td>

                <td>陈维兴</td>

            </tr>

            <tr>

                <td>计算机网络</td>

                <td>谢希仁</td>

            </tr>

        </tbody>

    </table>

</body>

　　在浏览器下浏览该页面，效果如下：

如果决定使用<thead.../>和<tfoot.../>元素，建议按如下次序来使用它们：<thead.../>、<tfoot.../>、<tbody.../>

5、<tr>标签

<tr> 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。

6、<th>标签

<th> 标签定义表格内的表头单元格。th 元素内部的文本通常会呈现为居中的粗体文本。

除了可以指定一些通用属性外，还可以指定以下几个属性：

7、<td>标签

<td> 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。

  • colspan：指定该单元格跨多少列，该属性值就是一个简单的数字。
  • rowspan：指定该单元格可横跨的行数。
  • height：指定该单元格的高度，该属性值既可以是像素值，也可以是百分比
  • width：指定该单元格的宽度，该属性值既可以是像素值，也可以是百分比

　　例如以下例子：

　　　　

<body>

    <table style="width: 240px" border="1">

        <caption>表格的跨行与跨列</caption>

        <tr>

            <td rowspan="2">跨2行的单元格</td>

            <td>普通单元格</td>

        </tr>

        <tr>

            <td>普通单元格</td>

        </tr>

        <tr>

            <td colspan="2">跨2列的单元格</td>

        </tr>

        <tr>

            <td>普通单元格</td>

            <td>普通单元格</td>

        </tr>

    </table>

</body>

浏览效果如下：

HTML表格相关元素的更多相关文章

  1. HTML笔记（五）表单<form>及其相关元素

    表单标签<form> 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入信息的元素. 输入标签<input> 输入标签的输入类型由其类型属性type决定.常见的输入 ...

  2. 【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素

    一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...

  3. JS——操作内容、操作相关元素

    操作内容:普通元素.innerHTML = "值": 会把标记执行渲染普通元素.innerText = "值": 将值原封不动的展示出来,即使里面有标记 var ...

  4. 复习-css列表和表格相关属性

    css列表和表格相关属性 list-style:设置所有列表属性 list-style-image:将图像设置为列表项标记,主要有url值 list-style-position:设置列表项标记的放置 ...

  5. HTML5：表格相关标记及其属性

    表格相关标记及其属性 <table>:表格,包括以下属性 属性 说明 width 宽度(有像素和百分比两种表示方法) height 高度(有像素和百分比两种表示方法) border 边框粗 ...

  6. mouseover和mouseout事件的相关元素

    在发生mouseover和mouseout事件时,还会涉及更多的元素,这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内.对mouseover事件而言,事件的主目标获得光标元素 ...

  7. relatedTarget、fromElement、toElement相关元素

    在发生mouseover和mouseout事件时,还会涉及更多的元素.这两个事件都会涉及把鼠标指针从一个元素的边界之内移到另一个元素边界之内.对mouseover事件而言,事件的主目标是获得光标的元素 ...

  8. 如何在集合中巧用Where来查找相关元素

    在我们的项目中我们经常会查找一些集合中的重要元素,当然我们可以使用常规的foreach循环和if语句来查询,但是我们要学会使用System.Linq命名空间下面的静态类Enumerable下面的静态方 ...

  9. html表格相关

    <html> <head> <style type="text/css"> thead {color:green} tbody {color:b ...

随机推荐

  1. 7、C++枚举类型

    7.枚举类型 C++的enum工具提供了另一种创建符号常量的方式,这种方式可以代替const.它还允许定义新类型,但必须按严格的限制进行.使用enum的语法与使用结构的相似. enum spectru ...

  2. php 对象的自定义遍历

    php对象的自定义遍历 对手册中的案例进行分析 更好的理解foreach() 的遍历步骤 class myIterator implements Iterator { private $positio ...

  3. vue从一个页面跳转到另一个页面并携带参数

    1.需求: 点击商场跳转到商业体列表 解决方案: 元页面: a标签中添加跳转函数 <a class="orderBtn1 sIRicon2" href="javas ...

  4. 一个数字从后向前输入每一位数字，Camel和Pascal命名规范，IsValid()

    int num = int.Parse(Console.ReadLine()); ; ) { n = num % ; num /= ; Console.WriteLine(n); } Camel和Pa ...

  5. Wannafly挑战赛26-F. msc的棋盘（模型转化＋dp）及一类特殊的网络流问题

    题目链接 https://www.nowcoder.com/acm/contest/212/F 题解 我们先考虑如果已知了数组 \(\{a_i\}\) 和 \(\{b_i\}\),如何判断其是否合法. ...

  6. 蓝桥-青蛙跳杯子（bfs）

    问题描述 X星球的流行宠物是青蛙,一般有两种颜色:白色和黑色. X星球的居民喜欢把它们放在一排茶杯里,这样可以观察它们跳来跳去. 如下图,有一排杯子,左边的一个是空着的,右边的杯子,每个里边有一只青蛙 ...

  7. vue的eventBus

    首先在main.js中 Vue.prototype.$eventBus = new Vue() A组件中通过触发事件或者其他什么,然后发射数据 this.$eventBus.$emit('key',' ...

  8. Linux快捷指令

    Linux创建一个快捷指令,直接跳转到某个目录中的某个文件 创建快捷指令命令: $ ln -s 源目录 目标快捷方式 删除快捷指令命令: $ unlink 快捷方式名 eg:比如我想在 /usr 目录 ...

  9. Gradle发布项目到 maven(1)

    常见的 Maven 仓库 JCenter.MavenCenter.JitPack epositories { google() // google 仓库 jcenter() // JCenter 仓库 ...

  10. python作业1.1，编写登录模块

    实现功能: 1.用户输入账户密码 2.验证账户是否存在于黑名单,如果存在于黑名单,则执行1,否则往下执行 3.验证用户名和密码. 3.1.如果验证成功,则打印欢迎信息并退出程序: 3.2.如果用户名存 ...