資訊專欄INFORMATION COLUMN
利用我們表格標(biāo)簽來做一個案例：
通過這個案例來給大家介紹下表格標(biāo)簽中的其它標(biāo)簽
1.ctrl+alt+n新建一個文件，命名為24-表格標(biāo)簽的其它標(biāo)簽
然后我們在這個程序中輸入代碼，我們觀察這個圖片發(fā)現(xiàn)標(biāo)題是h2，然后下面是一個表格標(biāo)簽，一共是六行六列，我們先做出來標(biāo)題欄
出現(xiàn)這種樣式，發(fā)現(xiàn)看不到邊框，因為表格邊框默認(rèn)為0，并且圖片中是一個細(xì)線表格，所以我們要按上節(jié)課學(xué)的來制作細(xì)線表格,我們給table加一個黑色的背景顏色，然后給tr加一個白色的背景顏色
? ? ??
邊框生成了，但是邊框比較寬，因為cell和cell之間有兩個像素的間隙，而圖片上只有一個像素，所以修改如下：
? ? ? ? ? ?
細(xì)線表格做出來了，但是我的細(xì)線表格比較窄，而要求我們做的表格寬，于是我們再給它添加一個寬度width為800px
? ? ?
接下來，我們通過觀察圖片可以得知今日小說排行榜這個標(biāo)題是正好在表格的居中位置，而我們之前講過可以給table添加align屬性，但是那是控制表格的，如果做了會出現(xiàn)這種樣式
而如果給h2添加align=“center”屬性，會出現(xiàn)這種樣式
為什么會出現(xiàn)這種效果呢？
因為在h2標(biāo)簽上加align=“center”，它是相對于整個頁面來說位于中間位置的
通過上面這張圖片，你可以看出來，這個“今日小說排行榜”的這個標(biāo)題距離左邊與右邊的距離是等距的
所以我想讓標(biāo)題位于表格的中間，所以不能給h2標(biāo)簽設(shè)置align屬性的值
那我們怎么設(shè)置讓標(biāo)題位于表格的中間呢？看注釋的文字，我們將之前的h2刪除掉，然后在table之后添加一個caption標(biāo)簽，在里面寫上之前的h2標(biāo)簽
這個標(biāo)簽有幾個注意點，看下面注釋
?
如何判定無效，看下邊的圖片，我們將caption標(biāo)簽和里面所包含的內(nèi)容寫到了table標(biāo)簽到上面
? ? ? ?出現(xiàn)了這種樣式
正確的顯示方式
并且在這個時候，整個標(biāo)題和我們的表格已經(jīng)成為一個整體了，我們可以來驗證一下，我們給table標(biāo)簽添加一個align=“center”屬性，發(fā)現(xiàn)整個表格都移動到了正中間
然后我們在后面的單元格里添加對應(yīng)的內(nèi)容
在這里一定不要犯一個錯誤，就是在添加超鏈接的時候，不要添加三個單元格，一定要把三個鏈接寫在一個單元格里面
然后我們發(fā)現(xiàn)除了“暴走大事件”以外都是水平居中的，我們要給tr標(biāo)簽添加一個屬性align=“center”
? ? ? ? ? ? ??
然后給第一個排名的“暴走大事件”多帶帶設(shè)置一個align=“l(fā)eft”
? ? ? ??
剩余的幾行copy就可以了，然后給第三個，第四個換個趨勢的圖片就可以了，我們在查找代碼時感覺不太方便，因為代碼太多太亂，所以我們要將代碼折疊起來查找，如下圖
? ?
?
然后我們發(fā)現(xiàn)第一行的標(biāo)題都是居中的，所以我們給第一行加一個align=“center”的屬性值
? ? ? ??
然后我們發(fā)現(xiàn)第一行“排名”，“關(guān)鍵字”，“趨勢”，“今日搜索”，“最近七日”，“相關(guān)鏈接”都分別是這一列的標(biāo)題
通過觀察我們應(yīng)該給第一行單元格的文字加粗，我們專門提供了一個標(biāo)簽專門用來存儲每一列的標(biāo)題
于是我們將第一列的標(biāo)簽都改為th
? ? ? ?
于是就可以將第一行的align=“center”刪除掉了
? ??
到此為止我們就發(fā)現(xiàn)，其實表格中有兩種單元格，一種是td，一種是th，td是專門用來存儲數(shù)據(jù)到，th是專門用來存儲當(dāng)前列的標(biāo)題的。
caption是專門用來指定表格都標(biāo)題都，而th是專門用來指定列都標(biāo)題都。?
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2162.html
摘要：請你設(shè)計出以下圖片里的這個樣式的表格步驟我先來制作一個兩行兩列的表格將里的設(shè)置成外邊距是不見了，但是和我們想要完成的圖片有一定的差距，我們發(fā)現(xiàn)這樣做出來的圖片好像是兩條線合并到了一起一樣，實際上確實是兩條線合并到了一起的，它是將每個單元格 請你設(shè)計出以下圖片里的這個樣式的表格 步驟： 我先來制作一個兩行兩列的表格 ? ? ? ? ? ? ? ? ? ? ?? ? ? 2.將tab...
摘要：寬度和高度的屬性可以給標(biāo)簽和標(biāo)簽使用標(biāo)簽不能使用水平對齊和垂直對齊的屬性其中水平對齊可以給標(biāo)簽和標(biāo)簽和標(biāo)簽使用垂直對齊只能給標(biāo)簽和標(biāo)簽使用外邊距和內(nèi)邊距屬性只能給標(biāo)簽使用補充上節(jié)課內(nèi)容表格的寬度和高度默認(rèn)是按照內(nèi)容的尺寸來調(diào)整的也可以通過給1.寬度和高度的屬性 可以給table標(biāo)簽和td標(biāo)簽使用（tr標(biāo)簽不能使用） 2.水平對齊和垂直對齊的屬性 其中水平對齊可以給table標(biāo)簽和tr標(biāo)簽和t...
摘要：蔬菜，水果同屬于物品清單里的，并且蔬菜，水果誰先誰后都無所謂，所以是無序列表，而蔬菜里面又包含這幾樣，所以它們又是一個無序列表，水果同理，這是無序列表中又包含無序列表，這是這節(jié)課講解都重點。上節(jié)課做了第一個練習(xí)，這節(jié)課我們來完成第二個練習(xí)（多級界面） 做之前先分析： 1.物品清單是這個界面的標(biāo)題，可以通過標(biāo)簽來做。 2.蔬菜，水果同屬于物品清單里的，并且蔬菜，水果誰先誰后都無所謂，所以是無序...
摘要：我們打開上節(jié)課做出來的頁面，然后點擊鼠標(biāo)右鍵檢查我們發(fā)現(xiàn)整個表格都是一個標(biāo)簽，標(biāo)題就是，而標(biāo)題下面是我們上節(jié)課并沒有寫這個標(biāo)簽，所以事實證明我們上節(jié)課寫的表格不是一個完整的表格，那么到底什么是一個完整的表格呢我們這節(jié)課來探討一下，但是這節(jié)知 我們打開上節(jié)課做出來的頁面，然后點擊鼠標(biāo)右鍵檢查 我們發(fā)現(xiàn)整個表格都是一個table標(biāo)簽，標(biāo)題就是caption，而標(biāo)題caption下面是... ...
摘要：這節(jié)課我們來練習(xí)幾個樣式的表格快捷鍵總結(jié)快速移動選中的代碼，上下移動往上移動向上箭頭往下移動向下箭頭快速合并和展開代碼合并和展開的是一個標(biāo)簽合并展開快速合并和展開代碼合并和展開選中的所有標(biāo)簽合并展開快速新啟一行回車這節(jié)課我們來練習(xí)幾個樣式的表格 1. 2. 3. 4. 快捷鍵總結(jié) 快速移動選中的代碼，上下移動 往上移動：ctrl+shift+向上箭頭 往下移動：ctrl+shi...
閱讀 1852·2021-10-09 09:44
閱讀 2723·2021-09-22 15:38
閱讀 2529·2021-09-09 09:33
閱讀 734·2021-09-07 09:58
閱讀 1847·2021-09-02 15:41
閱讀 2568·2019-08-30 15:55
閱讀 1821·2019-08-30 15:55
閱讀 578·2019-08-30 15:44
