HTML 表格
HTML 表允許將資料(如文字、影象、連結、表單、表單欄位、其他表等)排列到單元格的行和列中。
建立 HTML 表
HTML 中的表格使用 <table>
標記定義。
表格分為帶有 <tr>
標籤的行,代表表格行,每行分為帶有 <td>
標籤的資料單元格,代表表格資料。
一個 <td>
標籤可以包含文字、連結、圖片、列表、表格、其他表等。
<table border="1">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
注意: 瀏覽器內建樣式表將 <th>
元素中的文字顯示為粗體和居中。但是,你可以使用 CSS 覆蓋瀏覽器的預設樣式表。
表格 Cellpadding 和 Cellspacing
cellpadding
和 cellspacing
屬性用於調整在表的內部空白。
- cellpadding 調整表格單元格邊框與其內容之間的空白區域。
- cellspacing 調整表格單元格之間的空白區域。
<table border="1" cellpadding="10" cellspacing="5">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
跨越多行和單元格
跨越允許你跨多個其他列和行擴充套件列和行。
通常,當我們建立表格單元格時,它不能傳遞到另一個表格單元格下方或上方的空間。但是,你可以使用 colspan
屬性跨越多個列,並使用 rowspan
屬性跨越表中的多個行。這是一個例子:
<table border="1">
<tr>
<th rowspan="4">Users Info</th>
</tr>
<tr>
<td>1</td>
<td>John Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</table>