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