目錄
HTML有10个表格相关标签
可选的属性
 经过CSS添加后的table
首頁 web前端 html教學 关于table的一些记录_html/css_WEB-ITnose

关于table的一些记录_html/css_WEB-ITnose

Jun 24, 2016 pm 12:03 PM
table 記錄

HTML有10个表格相关标签

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

之间的任意位置。它对于搜索引擎的机器人记录信息十分重要。参数有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的时候,IE6 7对这个属性有反映,其他浏览器都无动于衷。在标签style中添加text-align也是同样的情况

表格的列定义属性

定义表格列的分组,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>
登入後複製

一、

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

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

拼多多買過的東西在哪裡查看記錄 查看買過的商品記錄的方法 拼多多買過的東西在哪裡查看記錄 查看買過的商品記錄的方法 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上的通話記錄條

如何在iPhone上的健康應用程式中查看您的用藥日誌記錄 如何在iPhone上的健康應用程式中查看您的用藥日誌記錄 Nov 29, 2023 pm 08:46 PM

iPhone可讓您在「健康」App中添加藥物,以便追蹤和管理您每天服用的藥物、維生素和補充劑。然後,您可以在設備上收到通知時記錄已服用或跳過的藥物。記錄用藥後,您可以查看您服用或跳過用藥的頻率,以幫助您追蹤自己的健康狀況。在這篇文章中,我們將指導您在iPhone上的健康應用程式中查看所選藥物的日誌歷史記錄。如何在「健康」App中查看用藥日誌歷史記錄簡短指南:前往「健康」App&gt;瀏覽「&gt;用藥」&gt;用藥「&gt;選擇一種用藥&gt;」選項「&a

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上清除歷史記錄 Jun 29, 2023 pm 01:13 PM

如何在Safari中清除iPhone歷史記錄?要清除Apple的Safari上的瀏覽和搜尋記錄,您需要在裝置上開啟「設定」應用程式。選擇「設定」後,您需要向下捲動並選擇Safari,然後將顯示另一個選單,您需要選擇清除歷史記錄和網站資料。現在您需要從選單中選擇清除歷史記錄和數據,這將從Apple的Safari瀏覽器中刪除所有搜尋記錄,瀏覽歷史記錄,cookie和數據。就是這樣,所有先前的瀏覽記錄和搜尋記錄現在都已從Safari中刪除。如果您不想刪除Safari中的所有搜尋記錄

keep怎麼記錄跑步公里 記錄跑步軌跡在哪裡 keep怎麼記錄跑步公里 記錄跑步軌跡在哪裡 Mar 12, 2024 am 11:10 AM

我們都知道上面對我麼來說都是非常不錯的運動類型的軟體,可以實時的幫助用戶們完成各種運動都可以,而且我們在跑步的一些過程之中也能看到對於上面的一些軌跡都是可以多多的了解得到的,很多用戶們對於上面的一些功能資訊都不了解,所以今天小編就來給你好好的講解其中的一些內容體驗,讓大家們都可以更好的進行多方面的一些選擇,如果你也想知道對於自己跑步方面的一些軌跡和記錄的話,一定不要錯過,更多優質的內容都在等著你們來了解,超多有趣的攻略資訊都在等著你們,如果你們也喜歡想知道的話,現在就跟小編一起來看看吧。 

See all articles