Table of Contents
HTML has 10 table-related tags
可选的属性
 经过CSS添加后的table
Home Web Front-end HTML Tutorial Some records about table_html/css_WEB-ITnose

Some records about table_html/css_WEB-ITnose

Jun 24, 2016 pm 12:03 PM
table Record

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

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

,

, , tags. They represent the header, body and foot of the table respectively. When printing web content, if the table is too large to be printed on one page, and will appear on every page (note: invalid in IE, but valid in Firefox).

Features of tbody:

In order to allow a large table to be displayed in segments when downloaded, that is to say, when the browser parses HTML, the table is interpreted as a whole. Display can be optimized using tbody. If the table is very long, use tbody segmentation to display it part by part without waiting for the entire table to be downloaded. Download one piece and display one piece. It has better effect when the table is huge. The content of the rows contained in tbody will be displayed first after downloading, without waiting for the end of the table. In addition, there is one more thing that needs to be noted. Table rows are originally displayed from top to bottom. However, after applying thead/tbody/tfoot, it will be displayed "from head to toe", regardless of the order of your lines of code. That is to say, if thead is written after tbody, when the html is displayed, it will still be displayed first and then tbody.

三个注意点:
Copy after login
  1. There can only be one thead and tfoot in a table, but tbody can have multiple
  2. tfoot must appear in front of tbody, so that the browser The footer of the table can be rendered before receiving the main data, which helps speed up the display of the table. This is especially important for large tables
  3. The tr tag must be used in thead, tbody and tfoot

2.

When setting the align attribute of the caption to left, IE6 7 reflects this attribute, while other browsers are indifferent. The same goes for adding text-align to the tag style

表格的列定义属性

定义表格列的分组,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>
Copy after login

1.

When setting the align attribute of the caption to left, each browser displays different styles

firefox chrome IE6 7 8 IE9
safari

3.

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>
Copy after login

、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>
Copy after login

firefox chrome IE6 7 IE8
IE9 safari

、CSS中的table-layout

  用来指定表格显示的样式

table { table-layout: fixed } 
Copy after login

* auto(缺省)* fixed* inherit
Copy after login

  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>
Copy after login

 经过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设计模板

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Where can I view the records of things I have purchased on Pinduoduo? How to view the records of purchased products? Where can I view the records of things I have purchased on Pinduoduo? How to view the records of purchased products? Mar 12, 2024 pm 07:20 PM

Pinduoduo software provides a lot of good products, you can buy them anytime and anywhere, and the quality of each product is strictly controlled, every product is genuine, and there are many preferential shopping discounts, allowing everyone to shop online Simply can not stop. Enter your mobile phone number to log in online, add multiple delivery addresses and contact information online, and check the latest logistics trends at any time. Product sections of different categories are open, search and swipe up and down to purchase and place orders, and experience convenience without leaving home. With the online shopping service, you can also view all purchase records, including the goods you have purchased, and receive dozens of shopping red envelopes and coupons for free. Now the editor has provided Pinduoduo users with a detailed online way to view purchased product records. method. 1. Open your phone and click on the Pinduoduo icon.

How to view and manage Linux command history How to view and manage Linux command history Aug 01, 2023 pm 09:17 PM

How to View Command History in Linux In Linux, we use the history command to view the list of all previously executed commands. It has a very simple syntax: history Some options for pairing with the history command include: Option description -c clears the command history for the current session -w writes the command history to a file -r reloads the command history from the history file -n Limit the number of output of recent commands Simply run the history command to see a list of all previously executed commands in a Linux terminal: In addition to viewing command history, you can also manage command history and perform modifications to previously executed commands , reverse search command history or even delete history completely

How to check call history in iPhone and export it? How to check call history in iPhone and export it? Jul 05, 2023 pm 12:54 PM

Call recording in iPhone is often underestimated and is one of the most critical features of iPhone. With its simplicity, this feature is of vital importance and can provide important insights about the calls made or received on the device. Whether for work purposes or legal proceedings, the ability to access call records can prove invaluable. In simple terms, call history refers to the entries created on your iPhone whenever you make or receive a call. These logs contain key information, including the contact's name (or number if not saved as a contact), timestamp, duration, and call status (dialed, missed, or not answered). They are a concise record of your communication history. Call history includes call history strips stored on your iPhone

How to view your medication log history in the Health app on iPhone How to view your medication log history in the Health app on iPhone Nov 29, 2023 pm 08:46 PM

iPhone lets you add medications to the Health app to track and manage the medications, vitamins and supplements you take every day. You can then log medications you've taken or skipped when you receive a notification on your device. After you log your medications, you can see how often you took or skipped them to help you track your health. In this post, we will guide you to view the log history of selected medications in the Health app on iPhone. A short guide on how to view your medication log history in the Health App: Go to the Health App&gt;Browse&gt;Medications&gt;Medications&gt;Select a Medication&gt;Options&a

C# Development Advice: Logging and Monitoring Systems C# Development Advice: Logging and Monitoring Systems Nov 22, 2023 pm 08:30 PM

C# Development Suggestions: Logging and Monitoring System Summary: In the software development process, logging and monitoring systems are crucial tools. This article will introduce the role and implementation suggestions of logging and monitoring systems in C# development. Introduction: Logging and monitoring are essential tools in large-scale software development projects. They can help us understand the running status of the program in real time and quickly discover and solve problems. This article will discuss how to use logging and monitoring systems in C# development to improve software quality and development efficiency. The role of logging system

How to log and monitor Java development projects How to log and monitor Java development projects Nov 03, 2023 am 10:09 AM

How to log and monitor Java development projects 1. Background introduction With the rapid development of the Internet, more and more companies have begun to develop Java and build various types of applications. In the development process, logging and monitoring are an important link that cannot be ignored. Through logging and monitoring, developers can discover and solve problems in time to ensure the stability and security of applications. 2. The importance of logging 1. Problem tracking: When an application error occurs, logging can help us quickly locate the problem.

How to clear history on iPhone How to clear history on iPhone Jun 29, 2023 pm 01:13 PM

How to clear iPhone history in Safari? To clear your browsing and search history on Apple's Safari, you need to open the Settings app on your device. After selecting Settings, you need to scroll down and select Safari, then another menu will appear and you need to select Clear History and Website Data. You now need to select Clear History and Data from the menu, which will delete all search history, browsing history, cookies, and data from Apple’s Safari browser. That's it, all your previous browsing history and search history are now deleted from Safari. If you don’t want to delete all search history in Safari

How to record running kilometers in keep? Where is the running track recorded? How to record running kilometers in keep? Where is the running track recorded? Mar 12, 2024 am 11:10 AM

We all know that the above are very good sports-type software for us, which can help users complete various sports in real time, and we can also see some of the above trajectories during some running processes. You can learn more about it. Many users don’t know about some of the above functional information, so today I will give you a good explanation of some of the content and experience, so that everyone can better carry out various functions. Some choices. If you also want to know some tracks and records about your own running, be sure not to miss it. More high-quality content is waiting for you to learn about it. A lot of interesting strategy information is waiting for you. If If you also want to know, let’s take a look with the editor now.​

See all articles