- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) >
- HTML表格屬性介紹
本篇內容介紹了“HTML表格屬性介紹”的有關(guān)知識，在實(shí)際案例的操作過(guò)程中，不少人都會(huì )遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學(xué)有所成！
[導讀] HTML表格用<table>表示。一個(gè)表格可以分成很多行(row)，用<tr>表示；每行又可以分成很多單元格(cell)，用<td>表示。這三個(gè)Tag是創(chuàng )建表格最常用的Tag。<html><body><p>表格所用到的Tag：整個(gè)表格開(kāi)始要用table；每
HTML表格用<table>表示。一個(gè)表格可以分成很多行(row)，用<tr>表示；每行又可以分成很多單元格(cell)，用<td>表示。
這三個(gè)Tag是創(chuàng )建表格最常用的Tag。
<html> <body> <p> 表格所用到的Tag：整個(gè)表格開(kāi)始要用table；每一行開(kāi)始要用tr；每一單元格開(kāi)始要用td。 </p> <h5>只有一行(Row)一列(Column)的表格</h5> <table border="1"> <tr> <td>100</td> </tr> </table> <h5>一行三列的表格</h5> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h5>兩行三列的表格</h5> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
在缺省情況下，如果不設置表格的邊界，表格是不顯示邊界的。
<html> <body> <h5>缺省情況下，表格沒(méi)有邊界。</h5> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <h5>表格Border設為0，也不顯示邊界：</h5> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
要顯示表格的邊界，可使用border這個(gè)屬性。
<html> <body> <h5>表格的邊界值設為1：</h5> <table border="1"> <tr> <td>第一</td> <td>行</td> </tr> <tr> <td>第二</td> <td>行</td> </tr> </table> <h5>表格的邊界值設為8，邊界更粗：</h5> <table border="8"> <tr> <td>第一</td> <td>行</td> </tr> <tr> <td>第二</td> <td>行</td> </tr> </table> <h5>表格的邊界值設為15，邊界更粗：</h5> <table border="15"> <tr> <td>第一</td> <td>行</td> </tr> <tr> <td>第二</td> <td>行</td></tr> </table> </body> </html>
用<th>來(lái)表示表格的表頭，表頭的字是粗體顯示的。
<html> <body> <h5>有表頭的表格：</h5> <table border="1"> <tr> <th>姓名</th> <th>電話(huà)</th> <th>傳真</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h5>豎直方向的表頭：</h5> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th>電話(huà)</th> <td>555 77 854</td> </tr> <tr> <th>傳真</th> <td>555 77 855</td> </tr> </table> </body> </html>
如果表格的單元格<td></td>之間沒(méi)有內容，那么這個(gè)單元格的邊界是不會(huì )被顯示出來(lái)的，盡管整個(gè)表格已設置邊界值。要顯示這個(gè)單元格的邊界，可以插入一個(gè) 空格符。
<html> <body> <table border="1"> <tr> <td>Some text</td> <td>Some text</td> </tr> <tr> <td></td> <td>Some text</td> </tr> </table> <p>上面的表格中，有一個(gè)單元格里是沒(méi)有任何內容的，這個(gè)空的單元格沒(méi)有顯示邊界，雖然整個(gè)表格設了邊界值。</p> <table border="1"> <tr> <td>Some text</td> <td>Some text</td> </tr> <tr> <td> </td> <td>Some text</td> </tr> </table> <p> 上面的例子，你可以看到，給這個(gè)單元格加上一個(gè)空格符號之后，單元格的邊界就顯示出來(lái)了。</p> <p>注意：空格符要用&bsp;表示。 是一個(gè)HTML特別字符，參見(jiàn)HTML特別字符(HTML Character Entities)。 </p> </body> </html>
<html> <body> <h5> 這個(gè)表格有標題： </h5> <table border="6"> <caption>表格標題</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
這個(gè)示例演示如何用<caption>在一個(gè)表格上加上標題。
<html> <body> <table border="1"> <tr> <td> <p>這是一段</p> <p>這是另外一段。</p> </td> <td>這個(gè)單元格里包含了一個(gè)表格： <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>這個(gè)單元格里包含了一個(gè)圖片： <img src = "../images/html_tutorials/mail.gif"> </td> <td>HELLO</td> </tr> </table> </body> </html>
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自互聯(lián)網(wǎng)轉載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權請聯(lián)系QQ:712375056 進(jìn)行舉報，并提供相關(guān)證據，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容。
Copyright ? 2009-2021 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 珠海市特網(wǎng)科技有限公司 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
