html - 表設計不工作

我試圖創建下表。任何人都可以幫助弄清楚我做錯了什麼嗎？html - 表設計不工作

期望：

enter image description here

電流： enter image description here

代碼：

<table border=1> 
    <tr> 
     <td rowspan=4>1</td> 
     <td colspan=2>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>7</td> 
     <td>8</td> 
     <td rowspan=4>3</td> 
    </tr> 
    <tr> 
     <td colspan=6>2</td> 
    </tr> 
    <tr> 
     <td colspan=6>9</td> 
    </tr> 
    <tr> 
     <td colspan=6>10</td> 
    </tr> 
</table>

來源

2014-01-23 Lacer

變更進行：

- 需要在第2行
應該不有colspan=2（這是沒有什麼不同比5-8）
你colspan=6都應該colspan=5

http://jsfiddle.net/a7S6h/1/

<table border=1> 
    <tr> 
     <td rowspan=4>1</td> 
     <td colspan=5>2</td> 
     <td rowspan=4>3</td> 
    </tr> 
    <tr> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>7</td> 
     <td>8</td> 
    </tr> 
    <tr> 
     <td colspan=5>9</td> 
    </tr> 
    <tr> 
     <td colspan=5>10</td> 
    </tr> 
</table>

來源

2014-01-23 06:14:40

-1

試試這個代碼：

<table border=1 style="text-align:center;width:50%;"> 
    <tr> 
     <td rowspan=4>1</td> 
     <td colspan=6>2</td> 
     <td rowspan=4>3</td> 
    </tr> 
    <tr> 
     <td colspan=2>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>7</td> 
     <td>8</td> 
    </tr> 
    <tr> 
     <td colspan=6>9</td> 
    </tr> 
    <tr> 
     <td colspan=6>10</td> 
    </tr> 
</table>

一件事是使文本對齊到中心，並給予一定的寬度您的餐桌。

來源

2014-01-23 06:15:29

這並不能解決實際的佈局問題。 –

我很抱歉..我誤解了這個問題。我編輯的答案工作正常。現在檢查這個。 –

DEMO

<table border=1> 
    <tr> 
     <td rowspan=4>1</td> 
     <td colspan=5>2</td> 

     <td rowspan=4>3</td> 
    </tr> 
    <tr> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>7</td> 
     <td>8</td> 
    </tr> 
    <tr> 
     <td colspan=5>9</td> 
    </tr> 
    <tr> 
     <td colspan=5>10</td> 
    </tr> 
</table>

來源

2014-01-23 06:16:32 Shadow

試試這個

<table width="100%" border="1"> 
     <tr> 
     <td rowspan="4" align="center">1</td> 
     <td colspan="5" align="center">2</td> 
     <td rowspan="4" align="center">3</td> 
     </tr> 
     <tr> 
     <td align="center">4</td> 
     <td align="center">5</td> 
     <td align="center">6</td> 
     <td align="center">7</td> 
     <td align="center">8</td> 
     </tr> 
     <tr> 
     <td colspan="5" align="center">9</td> 
     </tr> 
     <tr> 
     <td colspan="5" align="center">10</td> 
     </tr> 
    </table>

演示

http://jsfiddle.net/EV5Yz/3/

來源

2014-01-23 06:18:30

<table border=1> 
<tr> 
    <td rowspan=4>1</td> 
    <td colspan=6 align="center">2</td> 

    <td rowspan=4>3</td> 
</tr> 
<td colspan=2>4</td> 
    <td>5</td> 
    <td>6</td> 
    <td>7</td> 
    <td>8</td> 
<tr> 
    <td colspan=6 align="center">9</td> 
</tr> 
<tr> 
    <td colspan=6 align="center">10</td> 
</tr>

check at fiddle

來源

2014-01-23 06:20:48

html - 表設計不工作

回答

相關問題