XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <table>
- <tr>
- <td>我是單元格1</td>
- <td>我是單元格2</td>
- </tr>
- </table>
表格中可以插入文本、圖片、列表、段落、表單、水平線等任何html標(biāo)簽,甚至可以用來做頁面布局。但是table布局存在代碼冗余過長、不符合HTML規(guī)范、搜索引擎不友好等問題。因此建議大家盡量不要使用table進行頁面布局,除非頁面中確實需要一張表格。
剩下的<th>、<thead>、<tbody> 和 <tfoot>很少被用到,這是由于瀏覽器對它們的支持不太好。
表格和邊框?qū)傩?br />表格自身可以定義border屬性來決定表格邊框的寬度,該屬性的值默認(rèn)是以數(shù)字單位進行顯示,例如border=”1″該值的單位為px。注意,不要在border的數(shù)值后面加上任何單位,否該值無法正確識別。
表格的表頭
在<table>中可以通過<th>標(biāo)簽設(shè)置表頭,表頭的<th>標(biāo)簽與<tr>標(biāo)簽屬于平級,并且表頭一般出現(xiàn)在<tr>標(biāo)簽的前面。對于一個表格來說,表頭并不是必須的,可以根據(jù)需要插入表頭。<th>標(biāo)簽內(nèi)的文字會被自動加粗。
單元格的合并
單元格的合并分為垂直合并與水平合并,在合并時需要確定其他行與列中是否有對應(yīng)數(shù)量的單元格。
水平合并單元格使用colspan屬性,其值是用數(shù)字的形式確定需要合并的單元格數(shù)量,例如colspan=”2″即代表向右合并兩個單元格。
垂直合并單元格使用rowspan屬性,與水平合并的屬性相同,同樣也是以數(shù)字形式確定需要合并的單元格數(shù)量,例如rowspan=”2″代表向下合并兩個單元格。
實例演示代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <table border=“1”>
- <tr>
- <th>姓名</th>
- <th colspan=“2”>電話</th>
- </tr>
- <tr>
- <td>Bill Gates</td>
- <td>555 77 854</td>
- <td>555 77 855</td>
- </tr>
- </table><h4>橫跨兩行的單元格:</h4>
- <table border=“1”>
- <tr>
- <th>姓名</th>
- <td>Bill Gates</td>
- </tr>
- <tr>
- <th rowspan=“2”>電話</th>
- <td>555 77 854</td>
- </tr>
- <tr>
- <td>555 77 855</td>
- </tr>
- </table>
CSS Code復(fù)制內(nèi)容到剪貼板
- table { table-layout: fixed }