美女视频黄瓜,崔永元范冰冰视频

HTML做帖子技巧和代碼-邊框篇（2）

2010.03.20

HTML做帖子技巧和代碼-邊框篇（2）

發(fā)表日期：2005年12月21日已經(jīng)有225位讀者讀過此文

表格以<table>和</table>分別作起始標(biāo)識(shí)符。其中，<table>里有一些必要的參數(shù)，為容易理解起見，在這里只介紹本節(jié)用到的參數(shù)，其他的參數(shù)今后將陸續(xù)提到。border參數(shù)定義表格邊框的粗細(xì)，記為border=數(shù)值，數(shù)值取0，1，2，3等整數(shù)。width是我們要定義的參數(shù)，它規(guī)定表格的寬度，數(shù)值通常用100%，記作width=100%，值得注意的是，如果不設(shè)置width值，表格將根據(jù)單元格里的內(nèi)容自動(dòng)定義寬度。height參數(shù)規(guī)范表格的高度，通常可以不設(shè)置，而是讓內(nèi)容的多少讓系統(tǒng)自行設(shè)定。

<table>和</table>之下，還需要由兩個(gè)成對的標(biāo)識(shí)符號(hào)定義表格的行、列，它們分別是<tr>……</tr>，<td>……</td>，tr標(biāo)識(shí)符定義表中的行，td標(biāo)識(shí)符定義數(shù)據(jù)表元，即每行中的每一列。<td>……</td>要包含在<tr>……</tr>里面。此外，論壇要求在<table>下有<tbody>（表體），它也是成對出現(xiàn)，包含<tr>...</tr>。一張完整的表格全部語法如下：

<table border=2 width=80%>
   <tbody>
     <tr>
         <td>Hello Table</td>
    </tr>
  </tbody></table>

效果如下：

Hello Table

HTML之表格篇：表格的修飾（一）
No.1 表格邊框的修飾

上一講我們講到border屬性，border即為邊框，除了有粗細(xì)的數(shù)值定義以外，還有其他的屬性哦。我們先來看看亮邊框的顏色和暗邊框的顏色設(shè)置。亮邊框記作bordercolorlight，暗邊框記作bordercolordark。它們的數(shù)值可以用red、green、blue等表達(dá)，也可以用#11ee00這樣的方式來表達(dá)，比如：bordercolorlight=red，bordercolorlight=#808000。請看下面的表格：

Hello Table

以上表格的全部代碼清單如下：

<table border=6 width=100% bordercolorlight=#008000 bordercolordark=#808000>
  <tbody>
   <tr>
     <td width=100%>Hello Table</td>
   </tr>
</tbody>
</table>

上表中，左、上邊框是亮邊框，右、下邊框?yàn)榘颠吙?。怎么樣？這么一修飾就好看多了吧？

邊框顏色方面還有一個(gè)屬性：bordercolor。當(dāng)同時(shí)設(shè)置了暗、亮邊框的顏色，bordercolor的顏色設(shè)置是多余的，這一點(diǎn)應(yīng)該注意。現(xiàn)在我們用bordercolor來設(shè)置一下表格邊框，看看有什么效果：

Hello Table

代碼清單：

<table border="10" width=100% bordercolor=#FF0000>
<tbody>
  <tr>
    <td width="100%">Hello Table</td>
  </tr>
</tbody>
</table>

上面我們學(xué)習(xí)的有關(guān)表格邊框顏色的設(shè)置，下面繼續(xù)跟黑馬教授

學(xué)習(xí)表格邊框其他方面的知識(shí)。

內(nèi)容不多了，還講兩個(gè)表格邊框的屬性：一是邊框線（cellpadding）粗細(xì)和邊框空白處的大小，取值范圍從0開始，用正整數(shù)。下面是代碼和表格效果：

<table border=2 cellpadding=2 cellspacing=8 width=100%>
<tbody>
   <tr>
     <td width=100%>Hello Table 邊框線:2 ，邊框空白處:8</td>
   </tr>
</tbody>
</table>

HTML表格篇——表格的修飾（二）

No.2  表格背景的修飾

默認(rèn)情況下，HTML網(wǎng)頁里表格的背景色是白色的。這顯然不總是符合我們的要求，我們通常會(huì)設(shè)置各種背景顏色，以配合網(wǎng)頁或貼子主題。

設(shè)置表格的背景色很簡單，給其bgcolor屬性賦值即可，寫作bgcolor=數(shù)值，其數(shù)值取值方式和上一講講到的邊框顏色是一致的，比如：bgcolor=black或bgcolor=#000000。bgcolor屬性應(yīng)該放置在表格初始符<table......>當(dāng)中。下面舉個(gè)實(shí)例，先是代碼，后是效果：

<table border=10 cellpadding=2 width=100% bordercolorlight=#008000 bordercolordark=#008060 bgcolor=#CCCC00>
<tbody>
  <tr>
    <td>
      <p align=left><font face=黑體 size=5 color=#800080>背景色：bgcolor=#CCCC00<br>
      暗邊框顏色：#008000<br>
      亮邊框顏色：#008060</font>
    </td>
   </tr>
  </tbody>
</table>

背景色：bgcolor=#CCCC00
暗邊框顏色：#008000
亮邊框顏色：#008060

[注一：代碼中用上了設(shè)置字體對齊方式，在<td>和</td>之間用<p align=left>來定義左對齊，這種方式的定義無需終止標(biāo)識(shí)符，而定義字體的那句<font face=黑體 size=5 color=#800080>則需要在結(jié)束字體定義處有終止標(biāo)識(shí)符號(hào)</font>。]

[注二：細(xì)心的朋友可能已經(jīng)發(fā)現(xiàn)，表格代碼里多了一組<tbody>……</tbody>，這是怎么回事呢？又是什么意思呢？在純粹的HTML表格里本來可以不要這個(gè)的，但論壇有論壇的語法規(guī)范，它用<tbody>來定義表格體，如果沒有，系統(tǒng)也會(huì)自動(dòng)在<table>和</table>之間加上，且它要把<tr>……</tr>包含在里面。今后在論壇里制作表格應(yīng)該養(yǎng)成加<tbody>和</tbody>的習(xí)慣。]

除了使用背景色，我們還可以使用圖片來修飾表格背景，應(yīng)該說，用圖片來修飾表格的外觀會(huì)更漂亮得多。不過應(yīng)該注意，用來作表格背景圖的文件不要太大，太大了打開網(wǎng)頁速度較慢，圖片的尺寸方面，要么是有規(guī)則圖案的小圖片，要么就是和表格大小相一致的，否則做出的表格也不會(huì)有理想的外觀效果。下面我們在上面表格的基礎(chǔ)上，用這幅圖來作表格的背景圖片：

代碼及效果如下：

代碼(紅色那句就是加背景圖的語法，放在<table……>當(dāng)中合適的位置即可)：

<table border=10 cellpadding=2 width=100% bordercolorlight=#008000 bordercolordark=#008060 bgcolor=#CCCC00 background=http://image8.360doc.com/DownloadImg/2010/03/2011/2607873_1.gif>
<tbody>
  <tr>
    <td>
      <p align=left><font face=黑體 size=5 color=#800080>背景色：bgcolor=#CCCC00<br>
      暗邊框顏色：#008000<br>
      亮邊框顏色：#008060</font>
    </td>
   </tr>
  </tbody>
</table>

效果：

背景色：bgcolor=#CCCC00
暗邊框顏色：#008000
亮邊框顏色：#008060

Hello Table 邊框線:2 ，邊框空白處:8

HTML之表格篇——表格的嵌套（一）

表格的嵌套一方面是為使頁面（貼子）的外觀更為漂亮，利用表格嵌套來編輯出復(fù)雜而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格來做精確的編排，或者二者兼而有之。熟練地掌握表格的嵌套技巧并不是很困難的，只要你思路清晰，對表格的整體嵌套構(gòu)架做到心中有數(shù)，在實(shí)際編輯時(shí)就不會(huì)出亂，發(fā)布出來的作品也就不會(huì)只是一堆代碼。

黑馬將從最簡單的表格嵌套開始演示和講解，不會(huì)太難的。

兩張表格的嵌套：

Table No.1(Father Table)

Table No.2(Son Table)

Table No.1(Father Table)

代碼如下（紅色的為第二張表格的代碼）：

<table border=8 bordercolor=#0099cc width=100%>
<tbody>
  <tr>
   <td>Table No.1(Father Table)
    <table border=8 bordercolor=#ccffcc width=100%>
     <tbody>
      <tr>
       <td><br>Table No.2(Son Table)<br></td>
      </tr>
     </tbody>
    </table>
    Table No.1(Father Table)
   </td>
  </tr>
</tbody>
</table>

從上面的代碼中，我們看得出來，第二張表格代碼包含在第一張表格代碼中的<td>和</td>里面，這一點(diǎn)一定要弄清楚。不然，終止符不正確或缺少時(shí)，由于系統(tǒng)的容錯(cuò)性不好、自動(dòng)修正功能不夠智能化等問題，效果將會(huì)很糟糕，錯(cuò)誤太嚴(yán)重的話還會(huì)使瀏覽器在運(yùn)算的時(shí)候進(jìn)入死循環(huán)而造成機(jī)器當(dāng)機(jī)。

下面是三個(gè)表格的嵌套代碼及效果，由于表格里沒有內(nèi)容，所以，黑馬指定了三級表格的高度。代碼中，每一個(gè)表格的代碼用一種顏色來區(qū)分。

代碼：

<TABLE borderColor=#6633ff width="100%" border=8>
<TBODY>
  <TR>
   <TD>
    <TABLE borderColor=#cc9966 width="100%" border=8>
     <TBODY>
      <TR>
       <TD>
        <TABLE borderColor=#003300 height=200 width="100%" border=8>
         <TBODY>
          <TR>
           <TD></TD>
          </TR>
         </TBODY>
        </TABLE>
       </TD>
      </TR>
     </TBODY>
    </table>
   </td>
  </tr>
</tbody>
</Table>
HTML之表格篇——表格的嵌套（二）

先來看看以下表格：

你應(yīng)該可以看得出來，上表中有一個(gè)一級表格（父表格），里面有兩個(gè)二級表格（子表格），二級表格一上一下，位置十分清楚。如果你愿意，你還可以在二級表格里再嵌套次級別的表格。

現(xiàn)在我們來看代碼，每一種顏色的文字代碼一個(gè)表格的完整代碼，注意觀察起始標(biāo)識(shí)符號(hào)的前后關(guān)系。

<table border=6 bordercolor=#888888 width="100%">
  <tbody><tr><td>
    <table border=5 bordercolor=#ffcc00 width="100%" height=200>
       <tbody><tr><td></td></tr></tbody>
    </table>
    <table border=5 bordercolor=#ffcc00 width="100%" height=200>
       <tbody><tr><td></td></tr></tbody>
    </table>
  </td></tr></tbody>
</table>
HTML之表格篇——表格的嵌套（三）

與上一講的嵌套效果相比，我們可以明顯地看到：上面表格中的兩個(gè)二級表格是并列放在父表里的。如何做到這個(gè)效果呢？

首先，在父表格里，我們用兩次“<td>……</td>”將父表分隔成左右各一半，即父表是一個(gè)有一行兩列的表格。其次，我們在父表的左、右單元格里分別放置一個(gè)表格，就形成了以上效果。請研究以下代碼清單，為了區(qū)分層次，黑馬把每一個(gè)表格的代碼用一種顏色表示，請?zhí)貏e注意父表的代碼：

<TABLE borderColor=#ccffcc width="100%" border=4>
<TBODY>
  <TR>
   <TD width="50%">
    <TABLE borderColor=#666666 height=300 width="100%" border=4>
     <TBODY><TR><TD></TD></TR></TBODY>
    </TABLE>
   </TD>
   <TD width="50%">
    <TABLE borderColor=#666666 height=300 width="100%" border=4>
     <TBODY><TR><TD></TD></TR></TBODY>
    </TABLE>
   </TD>
  </TR></TBODY>
</TABLE>

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊舉報(bào)。

打開APP，閱讀全文并永久保存查看更多類似文章

HTML學(xué)習(xí)筆記☆表格制作

更多類似文章 >>

国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看