HTML（表格標簽）-有解無憂

<table> 標簽
- 表格由 <table> 標簽來定義，每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義），字母 td 指表格資料（table data），即資料單元格的內容，資料單元格可以包含文本、圖片、串列、段落、表單、水平線、表格等等，　
  - border 屬性：規定表格單元擁有邊框　　　
<tr> 表格行標簽　　
- 用來定義表格的一行，由于HTML表格是面向行的，所以必須分別表示每一行　　
- tr 元素可以在 table，thead，tbody 和 tfoot 元素內使用　　
- tr 元素內可以包含一個或者多個 td 或 th 元素　　
<td> 表格單元格標簽
- 用來定義表格單元格，可以同 colspan，rowspan，headers 區域屬性使用
  - colspan：左右合并單元格，該屬性規定了單元格可橫跨的列數，該屬性的值必須是整數　　
  - rowspan：上下合并單元格，該屬性規定了單元格可橫跨的行數，該屬性的值必須是整數　　
  - cellpadding：規定單元格邊沿與其內容之間的空白
    - cellpadding="0" 是讓單元格邊框線與單元格中的內容之間的距離為 0 像素，即單元格中內容緊挨著單元格的邊線，
  - cellspacing：規定單元格之間的空白
    - cellspacing="0" 是讓各單元格之間的縫隙為 0 象素
  - headers：該屬性的值是一個或多個單元的 ID 屬性值，將單元格與列標題相關聯，可用于使用螢屏閱讀器　　
  - width：規定表格寬度
  - height：規定表格高度
  - align：規定表格相對周圍元素的對齊方式
    - left
    - center
    - right
<th> 標題單元格標簽
- 用來定義標題單元格，使我們有效區分資料及其描述　　
- 它同 <td> 元素具有相同的區域屬性，兩者有如下區別：　　
  - <th> 是表示頭標記，通常位于首行或者首列，而且 <th> 中的文字默認會被加粗，而 <td> 是不會的　　　　
  - <td> 是資料標記，表示單元格的具體的資料　
快速制表
- 如下快速生成 3 行 2 列的方法

    <body>
        table>tr*3>td*2      <!-- 輸入完后，再按 Tab 鍵 -->
    </body>

    <body>
        <table border="1">
            <tr>
                <th>姓名</th>
                <th>年紀</th>
                <th>班級</th>
            </tr>
            <tr>
                <td>張三</td>
                <td>18</td>
                <td>一班</td>
            </tr>
        </table>
    </body>

    <body>
        <table border="1" width="200" height="20">
            <tr>
                <th>姓名</th>
                <th>年紀</th>
                <th>班級</th>
            </tr>
            <tr align="center">
                <td>張三</td>
                <td>18</td>
                <td>一班</td>
            </tr>
        </table>
    </body>

    <body>
        <table border="1" width="200" height="20">
            <tr>
                <th>姓名</th>
                <th>年紀</th>
                <th>班級</th>
            </tr>
            <tr>
                <td>張三</td>
                <td></td>
                <td rowspan="2"></td>    <!-- 上下合并 -->
            </tr>
            <tr>
                <td>李四</td>
                <td></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td>王五</td>
                <td colspan="2"></td>    <!-- 左右合并 -->
                <!-- <td></td> -->
            </tr>
        </table>
    </body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/58548.html

標籤：Html/Css

上一篇：table中cesllspacing與cellpadding的區別

下一篇：HTML（表單標簽）