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

cellpaddingcellspacing 屬性用於調整在表的內部空白。

  • 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>