網路城邦
回本城市首頁 八樂屋
市長:balawu  副市長:
加入本城市推薦本城市加入我的最愛訂閱最新文章
udn城市資訊科技網路分享【八樂屋】城市/討論區/
討論區表格語法 字體:
看回應文章  上一個討論主題 回文章列表 下一個討論主題
表格的底色與文字對齊
 瀏覽2,461|回應3推薦2

balawu
等級:7
留言加入好友
文章推薦人 (2)

女士
hannah 汪

作家部落格名稱備註
balawu八樂園聰明小子的爸爸
smartsamuel聰明小子八樂的愛子

回應 回應給此人 推薦文章 列印 加入我的文摘

引用
引用網址:https://city.udn.com/forum/trackback.jsp?no=56615&aid=2246767
 回應文章
語法說明
推薦1


balawu
等級:7
留言加入好友

 
文章推薦人 (1)

hannah 汪

  1. 在第一段的table語法中,這次多使用了一個屬性<width>:如果不加這個屬性,表格會以最精簡的寬度來顯示,但這次我們希望表格寬一點,所以將其寬度指定為480,您也可以用百分比的方式來決定表格要佔滿<可顯示區域>的寬度比例(例如:100%代表最大的寬度)
  2. align(對齊方式):可以用在<tr>或<td>中,
    *若用在tr, 則代表整個橫列每一直欄都依此方式對齊;
    *但若用在td,則只有<此橫列的這一欄>才依此方式對齊,<其它橫列的這一欄>並不受其影響。
    *共計有以下三種方式可設定:
    • left:向左對齊,預設方式(若未設定對齊方式,預設為向左對齊)
    • center:置中對齊
    • right:向右對齊
  3. bgcolor(背景色彩):同樣也可以用在<tr>或<td>中,
    *若用在tr, 則代表整個橫列每一直欄的底色都是如此;
    *但若用在td,則只有影響<此橫列的這一欄>的底色,<其它橫列的這一欄>並不受其影響。
    *顏色的設定可以用<代碼表>(例如:#ff0000為紅色)或<顏色名稱>(例如:red為紅色)來指定,請參考這份說明:色碼表


所以大家可以看到:

  1. 第一橫列每一欄的文字都置中對齊,底色也都一樣是灰色的,因為我們在第一橫列的tr語法中設定  align=center bgcolor= #cccccc
  2. 第二橫列的底色是綠色的,因為我們在第二橫列的tr語法中設定 bgcolor=#00ff00
  3. 第三横列的底色是藍色的,因為我們在第三橫列的tr語法中設定 bgcolor=#0000ff
  4. 但是在<第二及第三橫列>的<第二直欄>顏色卻是紅色的,因為我們在這二列的第二直欄td語法中都設定了 bgcolor=#ff0000


本文於 修改第 1 次
回應 回應給此人 推薦文章 列印 加入我的文摘
引用網址:https://city.udn.com/forum/trackback.jsp?no=56615&aid=2246855
語法(段落)
推薦1


balawu
等級:7
留言加入好友

 
文章推薦人 (1)

hannah 汪

為了讓大家比較容易閱讀語法,所以把這個主題的語法予以斷行,一段一段來看,這樣應該會比較清楚,不過在城邦要使用語法,請不要用這個有斷行的語法,不然會多出一些空白列。

下面就是排版後的語法:


<center><table border=1 width=480>

<tr align=center bgcolor= #cccccc>
  <td>作家</td>
  <td>部落格名稱</td>
  <td>備註</td>
</tr>

<tr  bgcolor=#00ff00>
  <td>balawu</td>
  <td align=center bgcolor=#ff0000>八樂園</td>
  <td align=right>聰明小子的爸爸</td>
</tr>

<tr  bgcolor=#0000ff>
  <td>smartsamuel</td>
  <td align=center bgcolor=#ff0000>聰明小子</td>
  <td align=right>八樂的愛子</td>
</tr>

</table></center>

回應 回應給此人 推薦文章 列印 加入我的文摘
引用網址:https://city.udn.com/forum/trackback.jsp?no=56615&aid=2246816
語法
推薦1


balawu
等級:7
留言加入好友

 
文章推薦人 (1)

hannah 汪

<center><table border=1 width=480><tr align=center bgcolor= #cccccc><td>作家</td><td>部落格名稱</td><td>備註</td></tr><tr  bgcolor=#00ff00><td>balawu</td><td align=center bgcolor=#ff0000>八樂園</td><td align=right>聰明小子的爸爸</td></tr><tr  bgcolor=#0000ff><td>smartsamuel</td><td align=center bgcolor=#ff0000>聰明小子</td><td align=right>八樂的愛子</td></tr></table></center>

回應 回應給此人 推薦文章 列印 加入我的文摘
引用網址:https://city.udn.com/forum/trackback.jsp?no=56615&aid=2246791