對于table來說，在一些小的模塊中進行表格布局是非常好用的。我們可以這樣來理解table，主要分成table部分和td部分。

花垣網站制作公司哪家好，找創(chuàng)新互聯(lián)！從網頁設計、網站建設、微信開發(fā)、APP開發(fā)、響應式網站設計等網站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)于2013年成立到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創(chuàng)新互聯(lián)。

table部分：

主要是來控制外邊框的（就是最外面一層邊框，不包括里面部分），它擁有的屬性為：margin屬性，border屬性，cellspacing屬性，規(guī)定單元格之間的空白cellpadding屬性，規(guī)定單元邊沿與其內容之間的空白。

tr部分：

主要來分割有幾行，一般只需要用來設定heigth。

td部分：

用來控制每個單元格的屬性，可是分別控制每個單元格的上下左右邊框，其中也包含padding屬性。

th部分：

用法和td相同，只是用來區(qū)分表頭的。

注意：

用百分比和用像素點是相同的。在table中，width指的是整個表格的寬度，而td的width值得指內部不包括內容content的寬度，這個同盒子模型。

以下用實例來說明table的一些常用布局手法：

<table bordercolor="red" border="1" class="table_3" cellpadding="10">

<tr>
<td>11111111111111111111111</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>

<table bordercolor="red" border="1" class="table_3" cellpadding="10"> <tr> <td>11111111111111111111111</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> </tr> </table>

注釋:

border 設置所有邊框的屬性值 border=1 數值越小邊框越細

bordercolor =”red” 指的是邊框顏色為10

cellpadding :規(guī)定單元邊沿與其內容之間的空白.,數值越大表格越大. (表格填充,用于隔開單元格與單元格的空間)

(圖1)

cellspacing=8 單元格與單元格之間的空隙距離.把表格想象成用鐵絲做的一個框,cellspacing的屬性值就相當于是用8格像素的厚度做的表格.(如圖1)

th:定義表頭,可以用來合并單元格 比如把第二行,第二三列合并.

    <table bordercolor="red" border="1" cellpadding="1" cellspacing="0">
        
        <tr>
            <td>11111111111111111111111</td>
            <td>2</td>
            <td>3</td>
            
        </tr>
            <tr>
                <td>4</td>
                <span ><th colspan="2">合并單元格</th></span>
            </tr>
                <tr>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                </tr>
                    <tr>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                    </tr>

如上所示:假設rowspan=2 合并兩行的同時,不刪除<td>10</td> 那最后一列就由3列變?yōu)?列

<table bordercolor="red" border="1" cellpadding="1" cellspacing="0"> <tr> <td>11111111111111111111111</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <span ><th colspan="2">合并單元格</th></span> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> </tr>

colspan 是列合并 colspan=”2″ 就是合并兩列

rowspan是行合并

<tr> <td>11111111111111111111111</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <th colspan="2">合并單元格</th> </tr> <tr> <<th rowspan="2">合并列</th> <td>8</td> <td>9</td> </tr> <tr> <td>11</td> <td>12</td> </tr>

<tr>
            <td>11111111111111111111111</td>
            <td>2</td>
            <td>3</td>
            
            
            
        </tr>
            <tr>
                <td>4</td>
                <th colspan="2">合并單元格</th>
            </tr>
                <tr>
                    <<th rowspan="2">合并列</th>
                    <td>8</td>
                    <td>9</td>
                </tr>
                    <tr>
                        
                        <td>11</td>
                        <td>12</td>
                    </tr>

合并行之后,把<td>10</td> 刪掉的情況

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網站標題：HTML標簽之table-創(chuàng)新互聯(lián)
網頁地址：http://chinadenli.net/article44/decpee.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站改版、App開發(fā)、網站設計公司、網頁設計公司、響應式網站、品牌網站制作

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)