HTML--表格

時間 2019-11-20

標籤 html 表格欄目 HTML 简体版

原文原文鏈接

直接上例子html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <p>每一個表格由table標籤開始，border屬性設置table的邊框寬度</p>
    <p>每一個表格行由tr標籤開始</p>
    <p>每一個表格數據由td標籤開始</p>
    <h4>兩行三列以下</h4>
    <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>

表格由<table>標籤來定義。每一個表格均有若干行(由<tr>標籤訂義)，每一行被分爲若干個單元格(由<td>標籤來定義)。2.字母td指的是表格數據(table data)，即數據單元格內容。數據單元格內容包含文本、圖片、列表、段落等。spa

表格的表頭使用<th>標籤來定義，例子以下code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <table border="1">
        <tr>
            <th>數據一</th>
            <th>數據二</th>
            <th>數據三</th>
        </tr>
        <!-- 第一行數據 -->
        <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>

3.跨行或者跨列的表格單元格
htm

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <h4>橫跨兩列的單元格</h4>
    <table border="1">
        <!-- 表格標題-->
        <caption>個人數據</caption>
        <tr>
            <th>數據一</th>
            <th colspan="2">數據二</th>
        </tr>
        <!-- 第一行數據 -->
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
    </table>
    <h4>橫跨兩行的單元格</h4>
    <table border="1">
        <!-- 表格標題-->
        <caption>個人數據</caption>
        <tr>
            <th>數據一</th>
            <td>100</td>
        </tr>
        <tr>
            <th rowspan="2">數據二</th>
            <td>200</td>
        </tr>
        <tr>
            <td>300</td>
        </tr>
    </table>
</body>
</html>

4.單元格間距(cell spacing)
圖片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <h4>帶有cellspacing的例子</h4>
    <table border="1" cellspacing="10">
    <tr>
        <td>First</td>
        <td>ROW</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>ROW</td>
    </tr>
    </table>
</body>
</html>

5.在表單元格中排列內容
utf-8

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <table border="1" width="400">
        <tr>
            <th align="left">姓名</th>
            <th align="right">張三</th>
            <th align="right">李四</th>
        </tr>
        <tr>
            <td align="left">性別</td>
            <td align="right">男</td>
            <td align="right">女</td>
        </tr>
        <tr>
            <td align="left">年齡</td>
            <td align="right">25</td>
            <td align="right">27</td>
        </tr>
    </table>
</body>
</html>

相關標籤/搜索

html+css+javascript+html

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。