HTML表格

乞力馬紮羅的雪CYF發表於2015-09-27
HTML

表格                描述

<table>           定義表格

<caption>       定義表格標題

<th>               定義表格的表頭（類似欄位名，也就是每一列的名字）

<tr>                定義表格的行

<td>               定義表格的單元

<thead>        定義表格的頁首

<tbody>        定義表格的主體

<tfoot>          定義表格的頁尾

<col>            定義表格的列屬性


具體實現如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

    <table border="1">
        <thead>這裡是頁首</thead>

        <!--定義表格的標題-->
        <caption>神奇的矩陣</caption>


        <tr>
            <!--定義表格的表頭-->
            <th>第一列</th>
            <th>第二列</th>
            <th>第三列</th>

        </tr>

        <!--定義表格的一行-->
        <tr>
            <td>1</td>
            <td></td>
            <td>3</td>
        </tr>

        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>

    <br/><br/>

    <table border="1">
        <tr>
            <td>單元格1</td>
            <td>單元格1</td>
        </tr>

        <tr>
            <td>
                <ul>
                    <li>蘋果</li>
                    <li>香蕉</li>
                    <li>菠蘿</li>
                </ul>
            </td>
            <td>我喜歡水果</td>
        </tr>
    </table>
    <br/><br/>

    <!--設定單元格邊距-->
    <table border="1" cellpadding="30">
        <tr>
            <td>單元1</td>
            <td>單元2</td>
            <td>單元3</td>
        </tr>

        <tr>
            <td>單元4</td>
            <td>單元5</td>
            <td>單元6</td>
        </tr>
    </table>

    <br/><br/>

    <!--設定單元格間距-->
    <table border="1" cellspacing="10" bgcolor="aqua">
        <tr>
            <td>單元1</td>
            <td>單元2</td>
            <td>單元3</td>
        </tr>

        <tr>
            <td>單元4</td>
            <td>單元5</td>
            <td>單元6</td>
        </tr>
    </table>


</body>
</html>

效果如下：

。


github主頁：https://github.com/chenyufeng1991  。歡迎大家訪問！

相關文章