html的表格基本使用

表格，由表格標簽<table><table>包裹着行標簽<tr></tr>，而行標簽里就是列標簽<td></td>.。

想多少列，就放多少個列標簽<td></td>。

如果想加粗內容，又不想使用樣式，就使用<th></th>標簽代替<td></td>標簽即可。

一個簡單的表格就是這樣。

<table>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

當然，光這樣是顯示不出內容的。

即便在<td></td>標簽里添加內容，出現的也只是這些內容而已。

要想出現表格，就必須在<table>里添加屬性。

<table border="1" bordercolor="#ff0" width="600" height="300" cellspacing="0" cellpadding="10">

border="1"　　//表示加了1像素的線，但卻是這樣的。

當然，上面還加了width="200" height="200"屬性，如：

<table border="1" width="200" height="200">

要想讓里面的空消失，就需要添加cellspacing="0"，表示邊框空隙為零。

    <table border="1" width="200" height="200" cellspacing="0">

cellpadding="10"　　//表示表格里的內邊距。

不過一般都是居中處理，所以就用的align="center"屬性，

align="left"　　//水平左

align="center"　　//水平中

align="right"　　//水平右

垂直方向

valign="top"　　//頂部

valign="middle"　　//中間

valign="bottom"　　//底部

剩下的就是合並單元格了

colspan="2"　　//合並相近的兩個列，因為合並了，所以下一個就不用寫了。

　　　　　<tr>
            <th colspan="2"></th>
            <!-- <th></th> -->
            <th></th>
        </tr>

rowspan="2"　　//合並相近的兩個行，同理。

　　　　 <tr>
            <td></td>
            <td></td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <!-- <td></td> -->
        </tr>

如果不注釋，就會被頂到外面去。

整體效果圖如下：

代碼如下：

<h3>表格的行與列</h3>
    <table border="1" bordercolor="#ff0" width="600" height="300" cellspacing="0" cellpadding="10">
        <tr align="center">
            <td colspan="2">1因為合並了，所以就不能添加多余的標簽了。否則會被當成新添加的標簽。</td>
            <td>2如：一行兩列的合並兩個，卻依然在后面追加td的話，就會多出一列變成三列。</td>
            <!-- <td>3</td> -->
        </tr>
        <tr align="center">
            <td>1</td>
            <td>2</td>
            <td rowspan="2">3這里與下邊合並了，所以下邊就不用添加td了。</td>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>2</td>
            <td>3<br>如果添加，就會像這樣被擠出來。上面的其實也是同樣的道理。</td>
        </tr>
        <tr align="center" height="100">
            <td valign="top">1垂直向上</td>
            <td valign="middle">2垂直居中</td>
            <td valign="bottom">3垂直向下</td>
        </tr>
    </table>

 

還有一種對weo優化好的寫法

    <table border="1" width="100" height="100">
        <thead>
            <tr>
                <td colspan="3"></td>
                <td></td>
                <td></td>
                <!-- 合並單元格 --> 
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td rowspan="2"></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>

效果是一樣的，只是多出了個標簽，有助於爬蟲識別罷了。