如何使三個單元格在一個單元格在一個表中

我寫了這個代碼：如何使三個單元格在一個單元格在一個表中

<html> 
    <head> 
    <title></title> 
    </head> 
    <body> 
    <style> 
    table, th, td { 
    border: 1px solid black; 
    width: 700px; 
    margin: auto; 
    } 

    </style> 
    <table> 
    <tr> 
    <td> a </td> 
    <td> b </td> 
    <td> c </td> 
    </tr> 
    <tr> 
    <td> a </td> 
    <td> </td> 
    <td> c </td> 
    </tr> 
    <tr> 
    <td> a </td> 
    <td> </td> 
    <td> c </td> 
    </tr> 
    </table> 
    </body> 
    </html>

這將產生一個表，看起來像這樣：

---------------------------------- 
|a  |  b  |  c | 
---------------------------------- 
|a  |   |  c | 
---------------------------------- 
|a  |   |  c | 
----------------------------------

但我要的是一個表結構像這樣：

---------------------------------- 
|a  |  b  |  c | 
----------   ------------ 
|a  |   |  c | 
----------   ------------ 
|a  |   |  c | 
----------------------------------

其中中間列的行被合併。我怎樣才能做到這一點？

感謝

來源

2016-05-06 JAMES

可以使用屬性rowspan爲td裏面的B。

<table border="1"> 
    <tr> 
     <td>a</td> 
     <td rowspan="3">b</td> 
     <td>c</td> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>c</td> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>c</td> 
    </tr> 
</table>

然後，您可以添加CSS將其調整的方式你喜歡它：

table{ 
    text-align: center; 
    width: 100%; 
}

下面是一個例子：https://jsfiddle.net/sntgoy5d/

如果你想在B處的頂部單元格，您可以使用css屬性vertical-align並將其設置爲top。

來源

2016-05-06 18:27:07

您可能想要將'style =「vertical-align：top」'添加到您正在放置'rowspan =「3」'的'td'上。 –

@ P.Gearman哈哈是啊，我正在編輯帖子以添加它作爲評論。 –

嗯，你打我回答這個問題（而且比我想的要好得多），所以這都很好。：P –

如何使三個單元格在一個單元格在一個表中

回答

相關問題