前端之HTML CSS表格的寫法
頁面的表格
什麼地方會使用表格?
在過去的時候,使用表格對頁面進行布局會出現表格套表格的部分。
現在我們使用表格做課程表或很明顯的表格的部分。
表格最基本的标簽。
表格需要使用table标簽。
我們表格用<tr></tr>表示一行。
用<tb></tb>表示一個單元格。
知道這些呢?就可以完成最簡單的單元格了。
在<table></table>的标簽内隻要有幾行就要寫幾個<tr></tr>,而<tr></tr>内又包含着<tb></tb>。
比如我們要寫一個遊戲的排行榜。
這個就是我們寫的代碼
這個就是我們寫完在網頁裡呈現的效果
這裡我們剛剛隻寫了第一行的單元格,那麼我們來繼續下面的步驟。
我們要在<tr></tr>的标簽内在繼續寫三個單元格,這個時候我們可以打出td*3就會直接出現三個td的标簽。
對應的網頁
但是我們現在做的表格是沒有邊框的,那麼要怎樣才能做出表格的邊框呢?
我要在
<tableborder=”1”>
<tr>
<tb>排名</tb>
<tb>遊戲名</tb>
<tb>下載量</tb>
</tr>
<tr>
<tb>1</tb>
<tb>歡樂鬥地主</tb>
<tb>10000</tb>
</tr>
<tr>
<tb>2</tb>
<tb>英雄聯盟</tb>
<tb>8000</tb>
</tr>
<tr>
<tb>3</tb>
<tb>吃雞</tb>
<tb>6000</tb>
</tr>
</table>
這時候我們的單元格裡就有了表格的邊框了,但是仔細看我們的每個單元格都是雙層的那麼怎麼才能做成單層的呢?
<tableborder=”1”>這裡我們就知道給單元格加上邊框是要在<table>的标簽上加上border=”1”。
單元格與單元格中間的距離用cellspacing=”來設置。
單元格的邊框合并成一條線用給torder-collapsecollapse
<tableborder=”1”width=”500”>這個時候就可以改變表格的寬度大小。
<tableborder=”1”width=”500”height=”300”>後面的 height就是可以改變我們單元格的高度。
我們想讓單元格每行或者每列大小不一樣的時候就可以加在<tb></tb>的裡面。
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!