近期公司讓我修改一些之前的table標簽寫的頁面，感覺對table相關的標簽不是太熟悉，於是專門整理一下：
1、如果給td標簽設置百分比寬度，比如有10列內容，我們卻設置了每個單元格是30%的寬度，會是這樣的效果，（單元格會緊着前面的達標寬度，后面的自適應）
那么如果給單元格設置固定寬度呢？（目前我在table外層套了個div，寬度為600px，table的寬度為100%）
我先在給每個單元格設置寬度為60px；
效果是每個單元格的寬度是平均分的
如果給單元格設置30px；（單元格依然是平均分的，設置的小寬度並沒有起作用）
然后，將table標簽的寬度設置為300px或則50%（外層元素為600px）；可見td的寬度還是平均分的，無論設置50px還是10px，效果都是平均分的；
從此可以得出結論，在td元素上設置固定寬度(px之類)的寬度是不生效的,設置百分比寬度會緊着達標。
那么我們經常會遇到這樣的需求，要求自定義表格寬度，該怎么辦呢,我們可以在單元格中都套一個div元素，
然后給這個div元素設置固定寬度，就可以把對應列的單元格撐開了，然后剩余的單元格還會按照剩余的寬度自適應寬度
代碼如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table</title> </head> <style> td{ vertical-align: middle; } th{ vertical-align: middle; } .itd{ width:30px; background: pink; } </style> <body> <div style="text-align:center;font-size:100px;font-weight:bold;"> 其它內容 </div> <div style="width:600px;margin:50px auto;border:1px solid red;"> <table border="1" style="width:100%;"> <th align="center"><div class="itd">標題1</div></th> <th align="center"><div class="itd">標題2</div></th> <th align="center"><div class="itd">標題3</div></th> <th align="center"><div class="itd">標題4</div></th> <th align="center"><div class="itd">標題5</div></th> <th align="center"><div class="itd">標題6</div></th> <th align="center"><div class="itd">標題7</div></th> <th align="center"><div class="itd">標題8</div></th> <th align="center"><div class="itd">標題9</div></th> <th align="center"><div class="itd">標題1哈啊啊阿</0</th> <tr> <td align="left"><div class="itd" style="width:100px;">單元格</div></td> <td align="center"><div class="itd" >單元格</div></td> <td align="center"><div class="itd">單元格</div></td> <td align="center"><div class="itd" style="width:100px;">單元格</div></td> <td align="center"><div class="itd">單元格</div></td> <td align="center"><div class="itd">單元格</div></td> <td align="center"><div class="itd">單元格</div></td> <td align="center"><div class="itd">單元格</div></td> <td align="center"><div class="itd">單元格</div></td> <td align="center"><div class="itd">單元格</div></td> </tr> </table> </div> </body> </html>
當然，如果我們設置的單元格的寬度，超過了table的寬度，那么內容就會從右邊溢出，
這個沒有辦法，這個需要我們設計布局，不能讓單元格的總寬度超出table的寬度！！
再來說一下，合並單元格colspan，和rowspan屬性，這是在td或th標簽上加的
下面來實驗一下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table</title> </head> <style> td{ vertical-align: middle; } th{ vertical-align: middle; } .itd{ width:30px; background: pink; } </style> <body> <div style="text-align:center;font-size:100px;font-weight:bold;"> 其它內容 </div> <div style="width:600px;margin:50px auto;border:1px solid red;"> <table border="1" style="width:100%;"> <th align="center" colspan="2"><div class="itd">標題1</div></th> <th align="center"><div class="itd">標題3</div></th> <th align="center" rowspan="2"><div class="itd">標題4</div></th> <th align="center"><div class="itd">標題5</div></th> <th align="center"><div class="itd">標題6</div></th> <th align="center"><div class="itd">標題7</div></th> <th align="center"><div class="itd">標題8</div></th> <th align="center"><div class="itd">標題9</div></th> <th align="center"><div class="itd">標題1哈啊啊阿</0</th> <tr> <td align="left"><div class="itd" style="width:100px;">單元格</div></td> <td align="center"><div class="itd" >單元格</div></td> <td align="center"><div class="itd">單元格</div></td> <td align="center"><div class="itd" style="width:100px;">單元格</div></td> <td align="center"><div class="itd">單元格</div></td> <td align="center"><div class="itd">單元格</div></td> <td align="center"><div class="itd">單元格</div></td> <td align="center"><div class="itd">單元格</div></td> <td align="center"><div class="itd">單元格</div></td> </tr> </table> </div> </body> </html>
效果
以上的操作幾乎就能滿足日常開發了
下面來簡單總結一下表格的布局操作
1、表格中單元格的寬度是自動平均分配寬度的，如果想調整其中的某一列的寬度，在td中套一個div元素，給這個div設置寬度，將td撐開（設置td的寬度無效）
2、單元格的總寬度不能超出table的寬度，否則內容會向右溢出，所以布局時一定要設計好。
3、table的border屬性有兩個值，1或0,設置1，table和單元格都會出現邊框，設置為0，table和單元格都沒有邊框，如果想設置table的邊框，我們可以給table標簽單獨加css樣式，
想給td加邊框，可以單獨給td加css樣式。
4、控制th和td中的元素上下對齊，注意是元素上下對齊，可以給th或td加vertical-align：top/middle/bottom;
5、控制th和td中的元素左右對齊，注意也是元素左右對齊，可以給th或td的元素上加align屬性，值為left/center/right;
6、合並單元格，用rowspan=“2”或colspan="數值",一定要注意，若果有合並單元格存在，一定要注意單元格的個數，否則會多出單元格