因為我們平常說網頁布局用DIV+CSS代替table布局，但是并不是要完全放棄table，在有些數據呈現的時候用table還是比較方便的，現在我們來講講用css控制table寬度的方法。

對table表格寬度定義有直接table標簽內使用width寬度屬性定義其寬度，另外也可以通過css樣式設置定義其寬度，根據需要可選擇自己適用的定義寬度方法。

一、html table標簽內寬度定義

我們直接在table標簽內加入width寬度屬性即可定義寬度如下：

<table width="300">

這樣定義table寬度為300px，記住這個寬度的值不需要帶html長度單位，默認以像素px為單位。

二、css定義table寬度

Css定義table寬度的css代碼如下：

table{width:300px}

這樣就通過css定義該網頁中table表格寬度都為300px,當然這樣不太好，如果一個網頁中多處使用了table表格布局這樣定義表格寬度自然不合適。

因此我們需要新建css命名一個類，這里命名為".divcss5"，css樣式如下：

table.divcss5{width:300px}

或者

.divcss5{width:300px}

對應table標簽應用：

<table class="divcss5"></table>

這樣只有加入“divcss5”類的table表格的表格寬度才為300px,這樣就區別了如果一個網頁中多處出現使用table表格情況。

三、總結

定義寬度屬性，無論是div、span還是table，我們都可以使用以上css定義寬度方法。

css控制td寬度

通常對td設置寬度，一般是對多組標簽里某一組設置寬度，或者設置多對里的每個td標簽都設置不同的寬度，那我們就需要對td加一個class或id選擇器(如何選擇class和id)有多個不同我們就做新建幾個class或id，以便區別與其它同級td標簽。

實例如下：

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

假如table總寬度為300，而這3對寬度方便為100px,150px,200px，這個時候我們就需要新建命名三個不同class選擇器，CSS代碼如下：

.divcss5-td-1{width:100px} 
.divcss5-td-2{width:150px} 
.divcss5-td-3{width:200px}

對應html源代碼如下：

<table> 
    <tr> 
        <td class="divcss5-td-1">寬度為100px</td> 
        <td class="divcss5-td-1">我寬度為150px</td> 
        <td class="divcss5-td-1">我寬度為200px</td> 
    </tr> 
</table>

寬度為100px我寬度為150px我寬度為200px

效果截圖：

使用css 對td寬度設置案例截圖

以上使用css設置td寬度方法與案例，希望對你有幫助。

擴展了解，直接對html td標簽設置寬度，我們直接td標簽加入width寬度屬性即可，html源代碼如下：

<table> 
    <tr> 
        <td width="100">寬度為100px</td> 
        <td width="150">我寬度為150px</td> 
        <td width="200">我寬度為200px</td> 
    </tr> 
</table>

寬度為100px我寬度為150px我寬度為200px

效果截圖

直接td標簽內設置寬度截圖

直接td標簽設置寬度與值

注意是，直接在td標簽內設置width寬度屬性其值是不需要加網頁長度單位的。

以上是使用css設置td寬度與html td標簽直接設置寬度方法，希望能掌握并靈活使用，有時候使用css td寬度有時候td標簽直接加入width，這需要根據需求選擇。