찾다
웹 프론트엔드HTML 튜토리얼关于table的一些记录_html/css_WEB-ITnose

HTML有10个表格相关标签

在将caption的align属性设置为left的时候,IE6 7对这个属性有反映,其他浏览器都无动于衷。在标签style中添加text-align也是同样的情况

表格的大标题,该标记可以出现在

之间的任意位置。它对于搜索引擎的机器人记录信息十分重要。参数有align、valign 、 、

、 标记。它们分别表示表格的表头,表正文,表脚。在打印网页内容的时候,如果表格很大,一页打印不完,和将在每一页出现(注意:在IE 中无效,但在 Firefox 有效)。

tbody的特点:

为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示。如果表格很长,用tbody分段,可以一部分一部分地显示,不用等整个表格都下载完成。下载一块显示一块,表格巨大时有比较好的效果。tbody包含行的内容下载完优先显示,不必等待表格结束。另外,还需要注意一个地方。表格行本来是从上向下显示的。但是,应用了thead/tbody/tfoot以后,就“从头到脚”显示,不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面,html显示时,还是以先thead后tbody显示。

三个注意点:

  1. thead和tfoot在一张表中都只能有一个,而tbody可以有多个
  2. tfoot必须出现在tbody前面,这样浏览器在接收主体数据之前,就能渲染表尾,有利于加快表格的显示速度。这一点对大型表格尤其重要
  3. thead、tbody和tfoot里面都必须使用tr标签

二、

在将caption的align属性设置为left的时候,各个浏览器表现出的样式各不相同

表格的列定义属性

定义表格列的分组,Firefox、Chrome 以及Safari 仅支持colgroup 元素的span 和width 属性

定义表格

定义表格主体

定义一个单元格

定义表格的表注(底部)

定义表格的表头,th元素内部的文本通常会呈现为粗体

定义表格的表头

定义表格的行

<table border="1">          <caption>Table caption here</caption>          <colgroup span="1" style="background:#DEDEDE;"/>          <colgroup span="2" style="background:#EFEFEF;"/>           <!-- Table Header-->          <thead>            <tr>                <th>Head 1</th>                <th>Head 2</th>                <th>Head 3</th>            </tr>          </thead>          <!-- Table Footer-->          <tfoot>                <tr>                    <td>Foot 1</td>                    <td>Foot 2</td>                    <td>Foot 3</td>                </tr>          </tfoot>           <!-- Table Body-->          <tbody>                <tr>                    <td>A</td>                    <td>B</td>                    <td>C</td>                </tr>                <tr>                    <td>D</td>                    <td>E</td>                    <td>F</td>                </tr>          </tbody>        </table>

一、

 firefox  chrome IE6 7 8 IE9
safari      
     

三、

IE6 7 IE8 9、firefox、safari、chrome

 

可选的属性

属性

描述

 align

left

center

right

不赞成使用。请使用样式代替。

规定表格相对周围元素的对齐方式。

 bgcolor

rgb(x,x,x)

#xxxxxx

colorname

不赞成使用。请使用样式代替。

规定表格的背景颜色。

 border

pixels

规定表格边框的宽度

 cellpadding

pixels
%

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

 cellspacing

pixels
%

规定单元格之间的空白

 frame

void
above
below
hsides
lhs
rhs
vsides
box
border

规定外侧边框的哪个部分是可见的

 rules

none
groups
rows
cols
all

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

 width

%
pixels

规定表格的宽度

 summary

text

规定表格的摘要。用于概括整个表格的内容。它对于搜索引擎的机器人记录信息十分重要。摘要是不会显示出来的,给一些其它的工具使用的,比如盲人阅读器等。

 bordercolor

 

rgb(x,x,x)

 

#xxxxxx

 

colorname

 

设置表格边框的颜色。但它在不同的浏览器下显示的效果不一致。(不推荐使用bordercolor 属性,而推荐使用CSS 样式表的border 属性来进行设置)

一、cellspacing

cellspacing在大部分浏览器中与style中的border-spacing效果相同,但在IE6 7中略有不同

IE6 7 cellspacing=0 IE6 7 border-spacing=0

二、css中的border-collapse

css中的border-collapse:collapse | separate 可以设置表格的边框是否被合并成一个边框。将设置为border-collapse:collapse后,各个浏览器显示各不相同

 firefox chrome  IE6 7 8  IE9
       
 safari      
       

、 中的scope

  scope属性定义将表头单元与数据单元相关联的方法;标识某个单元是否是列、行、列组或行组的表头;不会在普通浏览器中产生任何视觉变化;屏幕阅读器可以利用该属性。

  使用 scope 属性,可以将数据单元格与表头单元格联系起来。通过属性值 row,表头行包括的所有表格都将和表头单元格联系起来。指定 col,会将当前列的所有单元格和表头单元格绑定起来。

<table border="1">  <tr>    <th scope="col">Month</th>    <th scope="col">Savings</th>  </tr>  <tr>    <td scope="row">1</td>    <td>January</td>    <td>$100.00</td>  </tr>  <tr>    <td scope="row">2</td>    <td>February</td>    <td>$10.00</td>  </tr></table>

、frame , rules

frame常见属性
属性值 说明
above 显示上边框
border 显示上下左右边框
below 显示下边框
hsides 显示上下边框
lhs 显示左边框
rhs 显示右边框
void 不显示边框
vsides 显示左右边框

 

rules常见属性
属性值 说明
all 显示所有内部边框
groups 显示介于行列边框
none 不显示内部边框
cols 仅显示列边框
rows 仅显示行边框

<table border="1" frame="hsides" rules="groups">          <caption>Table caption here</caption>          <colgroup span="1" style="background:#DEDEDE;text-align:center"/>          <colgroup span="2" style="background:#EFEFEF;"/>           <!-- Table Header-->          <thead>            <tr>                <th>Head 1</th>                <th>Head 2</th>                <th>Head 3</th>            </tr>          </thead>          <!-- Table Footer-->          <tfoot>                <tr>                    <td>Foot 1</td>                    <td>Foot 2</td>                    <td>Foot 3</td>                </tr>          </tfoot>           <!-- Table Body-->          <tbody>                <tr>                    <td>A</td>                    <td>B</td>                    <td>C</td>                </tr>                <tr>                    <td>D</td>                    <td>E</td>                    <td>F</td>                </tr>          </tbody>        </table>

firefox chrome IE6 7 IE8
IE9 safari    
   

、CSS中的table-layout

  用来指定表格显示的样式

table { table-layout: fixed } 

* auto(缺省)* fixed* inherit

  auto表示单元格的大小由内容决定。fixed表示单元格的大小是固定的,由第一个指定大小的单元格决定;如果所有单元格都没有指定大小,则由第一个单元格的默认大小决定;如果单元格中的内容超出单元格的大小,则用CSS中的overflow命令控制。微软公司声称使用这个命令,表格的显示速度可以加快100倍。为了加快表格显示,最好事先就在CSS(或者table标签的width和height属性)中指定表格的宽度和高度。

、跨行rowspan 跨列colspan

熟练掌握表格的colspan、 rowspan属性,可以随心所欲的制作出复杂的表格。

<table border="1">          <caption>Table caption here</caption>          <colgroup span="1" style="background:#DEDEDE;text-align:center"/>          <colgroup span="2" style="background:#EFEFEF;"/>           <!-- Table Header-->          <thead>            <tr>                <th>Head 1</th>                <th>Head 2</th>                <th>Head 3</th>            </tr>          </thead>          <!-- Table Footer-->          <tfoot>                <tr>                    <td>Foot 1</td>                    <td>Foot 2</td>                    <td>Foot 3</td>                </tr>          </tfoot>           <!-- Table Body-->          <tbody>                <tr>                    <td rowspan="2">A</td>                    <td>B</td>                    <td>C</td>                </tr>                <tr>                    <td colspan="2">D</td>                </tr>          </tbody>        </table>

 经过CSS添加后的table

发挥你的想象力,玩转table

 

附加中保存的是示例的html代码

table.rar

也可以进入页面http://download.csdn.net/download/loneleaf1/7500555下载

 

参考资料:

http://blog.csdn.net/lujunql/article/details/5529989 table标签中thead、tbody、tfoot的作用
http://www.w3school.com.cn/tags/tag_table.asp HTML

标签
http://blog.csdn.net/nightelve/article/details/7957726 四个好看的CSS样式表格
http://www.divcss5.com/wenji/w503.shtml CSS如何设置html table表格边框样式
http://www.divcss5.com/html/h380.shtml HTML Table tr td th表格标签元素
http://www.divcss5.com/jiqiao/j470.shtml css table width表格宽度样式设置定义技巧教程篇
http://blog.csdn.net/neoxuhaotian/article/details/6596280 HTML学习笔记(三)
http://www.ruanyifeng.com/blog/2009/05/html_table_mastering.html 精通HTML表格的使用
http://www.douban.com/group/topic/10207896/ html常用标记详讲(二)--Table
http://www.787866.com/835.html html中10个与表格(table)相关标签
http://www.it118.org/specials/f27a38ab-a491-4669-bc47-108d9daed52c/fa512118-f79b-4693-958a-357e44086656.htm html中的表格(table)标签详解
http://www.cnblogs.com/xugang/archive/2010/08/11/1797305.html
标签中比较少见的属性和子标签:
http://www.iteye.com/topic/560496 主题:十个最简单实用的Table设计模板

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
拼多多买过的东西在哪里查看记录 查看买过的商品记录的方法拼多多买过的东西在哪里查看记录 查看买过的商品记录的方法Mar 12, 2024 pm 07:20 PM

  拼多多软件内提供的商品好物非常多,随时随地想买就买,而且每一件商品质量都是严格把关的,件件商品都是正品,不同还有非常多优惠的购物折扣,让大家网购根本停不下来。输入手机号在线登录,在线添加多个收货地址和联系方式,可以随时查看最新的物流动态,不同品类的商品板块都是开放的,搜索上下滑动选购下单,足不出户轻松体验便捷的网购服务,还能查看所有的购买记录,包括自己买过的商品,数十个购物红包、优惠券免费领取使用,现在小编在线详细为拼多多用户们带来查看买过的商品记录的方法。  1.打开手机,点击拼多多图标,

如何查看和管理 Linux 命令历史记录如何查看和管理 Linux 命令历史记录Aug 01, 2023 pm 09:17 PM

如何在Linux中查看命令历史记录在Linux中,我们使用history命令来查看所有以前执行的命令的列表。它有一个非常简单的语法:history与历史记录命令配对的一些选项包括:选项描述-c清除当前会话的命令历史记录-w将命令历史记录写入文件-r从历史记录文件重新加载命令历史记录-n限制最近命令的输出数量只需运行history命令即可在Linux终端中查看所有以前执行的命令的列表:除了查看命令历史记录之外,您还可以管理命令历史记录并执行修改先前执行的命令、反向搜索命令历史记录甚至完全删除历史记

如何在iPhone中检查通话记录并将其导出?如何在iPhone中检查通话记录并将其导出?Jul 05, 2023 pm 12:54 PM

iPhone中的通话记录经常被低估,并且是iPhone最关键的功能之一。凭借其简单性,此功能具有至关重要的意义,可以提供有关在设备上拨打或接听的呼叫的重要见解。无论是出于工作目的还是法律诉讼,访问通话记录的能力都被证明是无价的。简单来说,通话记录是指每当拨打或接听电话时在iPhone上创建的条目。这些日志包含关键信息,包括联系人的姓名(如果未另存为联系人,则为号码)、时间戳、持续时间和呼叫状态(已拨打、未接或未接听)。它们是您的通信历史记录的简明记录。通话记录包括存储在iPhone上的通话记录条

C#开发建议:日志记录与监控系统C#开发建议:日志记录与监控系统Nov 22, 2023 pm 08:30 PM

C#开发建议:日志记录与监控系统摘要:在软件开发过程中,日志记录与监控系统是至关重要的工具。本文章将介绍C#开发中日志记录与监控系统的作用和实施建议。引言:在大型软件开发项目中,日志记录和监控是必不可少的工具。它们可以帮助我们实时了解程序运行状况,快速发现并解决问题。本文将讨论C#开发中如何使用日志记录和监控系统,以提高软件质量和开发效率。日志记录系统的作用

如何进行Java开发项目的日志记录与监控如何进行Java开发项目的日志记录与监控Nov 03, 2023 am 10:09 AM

如何进行Java开发项目的日志记录与监控一、背景介绍随着互联网的快速发展,越来越多的企业开始进行Java开发,构建各种类型的应用程序。而在开发过程中,日志记录和监控是一个不可忽视的重要环节。通过日志记录与监控,开发人员可以及时发现和解决问题,保证应用程序的稳定性和安全性。二、日志记录的重要性1.问题追踪:在应用程序出现错误时,日志记录可以帮助我们快速定位问题

如何在iPhone上的健康应用程序中查看您的用药日志历史记录如何在iPhone上的健康应用程序中查看您的用药日志历史记录Nov 29, 2023 pm 08:46 PM

iPhone可让您在“健康”App中添加药物,以便跟踪和管理您每天服用的药物、维生素和补充剂。然后,您可以在设备上收到通知时记录已服用或跳过的药物。记录用药后,您可以查看您服用或跳过用药的频率,以帮助您跟踪自己的健康状况。在这篇文章中,我们将指导您在iPhone上的健康应用程序中查看所选药物的日志历史记录。如何在“健康”App中查看用药日志历史记录简短指南:前往“健康”App&gt;浏览“&gt;用药”&gt;用药“&gt;选择一种用药&gt;”选项“&a

keep怎么记录跑步公里 记录跑步轨迹在哪里keep怎么记录跑步公里 记录跑步轨迹在哪里Mar 12, 2024 am 11:10 AM

  我们都知道上面对于我么来说都是非常不错的运动类型的软件,可以实时的帮助用户们完成各种运动都可以,而且我们在跑步的一些过程之中也能看到对于上面的一些轨迹都是可以多多的了解得到的,很多用户们对于上面的一些功能资讯都不了解,所以今天小编就来给你好好的讲解其中的一些内容体验,让大家们都可以更好的进行多方面的一些选择,如果你也想知道对于自己跑步方面的一些轨迹和记录的话,一定不要错过,更多优质的内容都在等着你们来了解,超多有趣的攻略资讯都在等着你们,如果你们也喜欢想知道的话,现在就和小编一起来看看吧。 

如何在iPhone上清除历史记录如何在iPhone上清除历史记录Jun 29, 2023 pm 01:13 PM

如何在Safari中清除iPhone历史记录?要清除Apple的Safari上的浏览和搜索历史记录,您需要在设备上打开“设置”应用程序。选择“设置”后,您需要向下滚动并选择Safari,然后将显示另一个菜单,您需要选择清除历史记录和网站数据。您现在需要从菜单中选择清除历史记录和数据,这将从Apple的Safari浏览器中删除所有搜索历史记录,浏览历史记录,cookie和数据。就是这样,所有以前的浏览历史记录和搜索历史记录现在都已从Safari中删除。如果您不想删除Safari中的所有搜索历史记录

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경