CSS表單與資料表(上)

2022-09-06 16:12:11 字數 3007 閱讀 3473

表單在現代web應用中佔據著重要地位。

表單可以很簡單,也可以非常複雜,要橫跨幾個頁面。

除了從使用者**獲得資料,web應用還需要以容易看懂的方式展示資料。**是展示複雜資料的最佳方式。

html中的**是通過table元素來建立的,**由tr(table row,行)和td(table data cell,資料單元)組成。

表題是**的標題,用caption表示。

january2015

表頭表體表腳分別用theadtbodytfoot來表示。

如果使用thea或tfoot,那至少也要使用乙個tbody。

乙個表中只能有乙個thead或tfoot,但可以有多個tbody,以便把複雜的表切分成更小也更容易維護的資料塊。

列標題行標題應該使用th來表示,然後通過scope屬性的值說明它們是行標題(row)還是列標題(col)。scope屬性的值還可以是rowgroupcolgroup,表示這個行標題或列標題的範圍涵蓋多行或多列。

可以列標題放在thead中,單獨給它們定義一種樣式。

mon

sun

通過colcolgroup給某一列新增樣式。

colgroup用於定義列組,每一列由乙個col定義。

colgroup要放在table裡,位於caption的後面,thead、tfoot或tbody的前面。

january2015

mon1

可以應用給列的樣式非常有限,只有backgroundborderwidthvisibility

css標準規定了兩種**邊框型別:分離型和折疊型(border-collapse: collapse)。

**單元的大小可以通過table-layout屬性來控制,預設情況下,這個屬性的值是auto,基本上是由瀏覽器按照單元格的內容來確定單元格的寬度。

.cal
如果把table-layout屬性的值改為fixed,那麼單元格的寬度就會基於**第一行中每個單元格的寬度來確定,或者基於colcolgroup元素的寬度來確定。

去掉鏈結的下劃線,並讓它們顯示為塊級元素,這樣每個鏈結都會填滿自己所在的單元格,讓可點選區域變大。

.cal a
給鏈結的懸停和聚焦狀態應用樣式。

.cal a:hover,

.cal a:focus

/* 設定不在當月的日期 */

.cal-inactive

/* 設定當前日期 */

我們可以讓不是**的元素具有「網格性質」,從而實現我們想要的布局。反過來,我們也可以讓**不顯示為**。

tesla car models

model

top speed

model s

201 km/h

.cars 

/* 斑馬條紋 */

.cars tr:nth-child(even)

/* 設定行高和內邊距 */

**有很多預設樣式和顯示模式。我們使用max-width條件,這樣就把小螢幕作為一種特殊情況來處理。

@media only screen and (max-width: 760px) 

.cars thead

.cars tr

.cars td, .cars th

.cars th

.cars td:before

}

此時,單元格都成了塊級元素,並佔據100%寬度,結果就是在一行中上下堆疊起來。**的標題完全隱蔽。

我們把每個列名新增為每個單元格的data-label屬性,然後再利用:before偽元素插入這些屬性的值。

`201 km/h`

/* 省略 */

.cars td:before

/* 省略 */

shell指令碼匯出mysql資料表(單錶匯出)

平常報表時中經常需要自動備份mysql資料庫中的各種資料表,來簡單的說一下如何在shell指令碼下連線mysql資料庫並備份mysql資料表。bin bash host 127.0.0.1 ip 127.0.0.1表示本機位址 user lgl 資料庫使用者名稱 password 123 資料庫密碼...

建立與管理資料表

create table if not exists 列名 資料型別 not null null default 列預設值 ebgine 儲存引擎例項alter table xs add 獎學金等級 char 10 after 總學分 alter table xs modify 姓名 char 20...

資料型別與資料表

mysql資料型別 資料表是資料庫最重要的組成部分之之一,是其他物件的基礎 use db name 開啟資料庫 create table if notexists table name column name data type,例如我們要建立乙個名字叫tb1的資料表 mysql create ta...