【靜態頁面架構】CSS之表格

instein 發布于2019-08-29 16:32 / 3324人閱讀

摘要：架構表格元素表格的基本結構以元素建立表格元素是表格行，元素是表示表格單元格表格以行和列表示容器元素屬性默認的表格和單元格都有邊框表格默認是有寬度的單元格之和決定元素表示表格中的單元格單元格默認寬度由內容決定姓名年齡職業桐人

CSS架構 表格: 1.元素:

表格的基本結構；
以table元素建立表格
tr元素是表格行，td元素是表示表格單元格

表格的表頭單元格；

th元素來定義表格行或列表頭單元格
th元素中使用scope屬性設置單元格的行和列表頭



    
    姓名
    年齡
    職業


    桐人
    17
    劍士


    亞絲娜
    16
    補師

表格的標題；

caption元素定義表格的標題
caption元素被定義在table元素中頂部

登錄人員表
姓名	年齡	職業
桐人	17	劍士
亞絲娜	16	補師

跨行與跨列；

colspan屬性是設置單元格橫跨的列數
rowspan屬性是設置單元格橫跨的行數

長表格；

thead元素；設置表格的頁眉內容
tbody元素；設置表格的主題內容
tfoot元素；設置表格的頁腳內容

登錄人員表
姓名	年齡	職業
桐人	16	劍士
亞絲娜	17	補師

2.樣式: 表格布局；

以table-layout屬性定義布局表格單元格
fixed值；

表格標題；

以caption-side屬性來是caption元素顯示表格位置
有2個值表示；top表示表格的頂部，bottom表示表格的底部

登錄人員表
姓名	年齡	職業
桐人	17	劍士
亞絲娜	16	補師

表格邊框；

border-collapse屬性來表示決定邊框是分開還是合并
border-spacing屬性設置相鄰單元格邊框之間距離

GPU云服務器云服務器架構之坑系列 jsp 設置頁面之企業it架構轉型之道 css表格樣式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113808.html

【靜態頁面架構】HTML之布局

摘要：一布局水平居中第一種居中方式以屬性設置父級元素和設置行內塊級元素將屬性設置父級元素設置文本內容水平方向居中設置行內塊級元素愛新覺羅呼延覺羅第二種居中方式以設置塊級元素和外邊距特性來設置外邊距實現水一.布局； 1.水平居中第一種居中方式；以text-align屬性設置父級元素和設置行內塊級元素 body{ text-align: cente...

imtianx 2019-08-02 11:21 評論0 收藏0
HTML

摘要：目前，中關村黑馬程序員訓練營已成長為行業學員質量好課程內容深企業滿意的移動開發高端訓練基地，并被評為中關村軟件園重點扶持人才企業。黑馬程序員的學員篩選制度，遠比現在以上的企業招聘流程更為嚴格。系統的學習可以參考w3c的教程 web概念概述 * JavaWeb： * 使用Java語言開發基于互聯網的項目 * 軟件架構： 1. C/S: Client/Server 客戶端/服務...

Snailclimb 2019-04-23 13:29 評論0 收藏0
設計架構

摘要：先來看一張系統前后端架構模型圖。一種接口的約定本文用于定義一種統一的接口設計方案，希望具有參考價值。，和都是常見的軟件架構設計模式，它通過分離關注點來改進代碼的組織方式。如何無痛降低 if else 面條代碼復雜度相信不少同學在維護老項目時，都遇到過在深深的 if else 之間糾纏的業務邏輯。面對這樣的一團亂麻，簡單粗暴地繼續增量修改常常只會讓復雜度越來越高，可讀性越來越差，有沒...

graf 2019-06-24 17:56 評論0 收藏0
【靜態頁面架構】CSS之鏈接和圖像

CSS架構一。鏈接: 鏈接元素:通過使用a元素的href屬性設置跳轉到指定頁面地址 a{ color: blue; text-decoration: none; } a:hover{ cursor:default; text-decoration:...

jlanglang 2019-08-29 16:32 評論0 收藏0
【靜態頁面架構】CSS之顯示與溢出

摘要：架構顯示與溢出顯示屬性以設置隱藏效果和元素類型設置當前元素為隱藏效果這種方式將元素設置為隱藏后，該元素不會再占有頁面空間通過屬性將元素顯示將元素設置為塊級元素將元素設置為內聯元素將元素設置為行內元素屬性以設置，元素顯示或隱藏 CSS架構顯示與溢出； 1.顯示； display屬性；以display設置隱藏效果和元素類型 div { widt...

tolerious 2019-08-29 16:34 評論0 收藏0