tft每日頭條

 > 生活

 > html css項目實戰

html css項目實戰

生活 更新时间:2024-09-04 16:18:33

前端之HTML CSS表格的寫法

頁面的表格

html css項目實戰(前端之HTMLCSS表格的寫法)1

什麼地方會使用表格?

在過去的時候,使用表格對頁面進行布局會出現表格套表格的部分。

現在我們使用表格做課程表或很明顯的表格的部分。

表格最基本的标簽。

表格需要使用table标簽。

我們表格用<tr></tr>表示一行。

用<tb></tb>表示一個單元格。

知道這些呢?就可以完成最簡單的單元格了。

在<table></table>的标簽内隻要有幾行就要寫幾個<tr></tr>,而<tr></tr>内又包含着<tb></tb>。

比如我們要寫一個遊戲的排行榜。

這個就是我們寫的代碼

html css項目實戰(前端之HTMLCSS表格的寫法)2

這個就是我們寫完在網頁裡呈現的效果

html css項目實戰(前端之HTMLCSS表格的寫法)3

這裡我們剛剛隻寫了第一行的單元格,那麼我們來繼續下面的步驟。

我們要在<tr></tr>的标簽内在繼續寫三個單元格,這個時候我們可以打出td*3就會直接出現三個td的标簽。

html css項目實戰(前端之HTMLCSS表格的寫法)4

對應的網頁

html css項目實戰(前端之HTMLCSS表格的寫法)5

但是我們現在做的表格是沒有邊框的,那麼要怎樣才能做出表格的邊框呢?

我要在

<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>

這時候我們的單元格裡就有了表格的邊框了,但是仔細看我們的每個單元格都是雙層的那麼怎麼才能做成單層的呢?

html css項目實戰(前端之HTMLCSS表格的寫法)6

<tableborder=”1”>這裡我們就知道給單元格加上邊框是要在<table>的标簽上加上border=”1”。

單元格與單元格中間的距離用cellspacing=”來設置。

單元格的邊框合并成一條線用給torder-collapsecollapse

<tableborder=”1”width=”500”>這個時候就可以改變表格的寬度大小。

<tableborder=”1”width=”500”height=”300”>後面的 height就是可以改變我們單元格的高度。

我們想讓單元格每行或者每列大小不一樣的時候就可以加在<tb></tb>的裡面。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved