展開表

我有我的例子非常接近..但有一個問題，瞭解如何使擴大佔用2空間......我很難解釋任何東西讓我只是發佈我的代碼和我的例子，你會看到我的意思是。展開表

<!Doctype html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="schedule.css"> 


     <title>My Sample ScheduleR_M</title> 
    </head> 

    <body> 
     <h1>R_M Fake Winter Schedule</h1> 
     <table> 
     <caption> 
     Winter 
     <br> 
     2016 
     <br> 
     Schedule 
     </caption> 
      <tr> 
       <th>  </th> 
       <th>Monday</th> 
       <th>Tuesday</th> 
       <th>Wednesday</th> 
       <th>Thursday</th> 
       <th>Friday</th> 
      </tr> 
     <tr> 
      <td>8:30</td> 
      <td>IS 210</td> 
      <td>IS 210</td> 
      <td>IS 210</td> 
      <td>IS 210</td> 
      <td>IS 210</td> 
     </tr> 
     <tr> 
      <td>9:30</td> 
      <td>Office Hours</td> 
      <td>IS 107</td> 
      <td>IS 107</td> 
      <td>IS 107</td> 
     </tr> 
     <tr> 
      <td>10:30</td> 
      <td>IS 105</td> 
      <td>IS 105</td> 
      <td>IS 105</td> 
      <td rowspan="2" class="space">  </td> 
     </tr> 
     <tr> 
      <td>11:30</td> 
      <td>IS 120</td> 
      <td>IS 120</td> 
      <td>IS 120</td> 
      <td>  </td> 
     </tr> 
     <tr> 
      <td>12:30</td> 
      <td>Lunch</td> 
     </tr> 

    </table> 
    </body> 
    </html> 


    table { 
     margin-left: 20px; 
     margin-right: 20px; 
     border: thick solid green; 
     caption-side: right; 
     border-collapse: collapse; 
    } 

    h1 { 
     color: red; 
     border-bottom: thin dotted red; 
    } 

    td, th { 
     border: thin dotted gray; 
     padding: 5px; 

    } 

    th { 
     color: orange; 
     background-color: purple; 

    } 
    td:first-child { 
     color: orange; 
     background-color: purple; 
    } 


    caption { 
     font-style: italic; 

    }

THIS IS ThE Example 我得到它的.pdf格式我不能檢查和簡單地看只是爲了拿到出路，如果有人能解釋什麼即時通訊做wrong..like我說我感到親近...謝謝你們希望我提供足夠的信息

<!Doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="schedule.css"> 


    <title>My Sample ScheduleR_M</title> 
</head> 

<body> 
    <h1>R_M Fake Winter Schedule</h1> 
    <table> 
    <caption> 
    Winter 
    <br> 
    2016 
    <br> 
    Schedule 
    </caption> 
     <tr> 
      <th>  </th> 
      <th>Monday</th> 
      <th>Tuesday</th> 
      <th>Wednesday</th> 
      <th>Thursday</th> 
      <th>Friday</th> 
     </tr> 
    <tr> 
     <td>8:30</td> 
     <td>IS 210</td> 
     <td>IS 210</td> 
     <td>IS 210</td> 
     <td>IS 210</td> 
     <td>IS 210</td> 
    </tr> 
    <tr> 
     <td>9:30</td> 
     <td colspan="2" style="background-color: #D3D3D3; text-align: center;">Break time</td> 
     <td>IS 107</td> 
     <td>IS 107</td> 
     <td>IS 107</td> 
    </tr> 
    <tr> 
     <td>10:30</td> 
     <td>IS 105</td> 
     <td>IS 105</td> 
     <td>IS 105</td> 
     <td rowspan="2" colspan="2" style="background-color: #D3D3D3; text-align: center;">break time</td> 
    </tr> 
    <tr> 
     <td>11:30</td> 
     <td>IS 120</td> 
     <td>IS 120</td> 
     <td>IS 120</td> 
     <td>  </td> 
    </tr> 
    <tr> 
     <td>12:30</td> 
     <td colspan="5" style="background-color: gray; text-align: center;">Lunch</td> 
    </tr> 

</table> 
</body> 
</html> 


table { 
    margin-left: 20px; 
    margin-right: 20px; 
    border: thick solid green; 
    caption-side: right; 
    border-collapse: collapse; 
} 

h1 { 
    color: red; 
    border-bottom: thin dotted red; 
} 

td, th { 
    border: thin dotted gray; 
    padding: 5px; 

} 

th { 
    color: orange; 
    background-color: purple; 

} 
td:first-child { 
    color: orange; 
    background-color: purple; 
} 


caption { 
    font-style: italic; 

}

上面的代碼是造成那裏是一個空的新潮流列什麼我做錯了什麼......？多謝你們！

來源

2017-03-10 Bioxvirus

我搜索谷歌爲「HTML表格合併單元格」，發現這個http://www.computerhope.com/issues/ch001655.htm – Benrobot

rowspans和colspans的基本原理是：如果你在一個td第一行中使用例如rowspan:2，你的第二個行都有一列小於第一，因爲那個單元從頂部向下延伸到第二行。與集體相同。

如果您的排最後一行有colspan = 5，那麼您只需要2個單元格/ td s，因爲1 + 5加起來就是其他行所具有的6。

我用下面的colspans和rowspans重新創建了你的例子。我還爲td s分配了一個名爲「中心」的類，該類跨越幾列以將文本居中放置在較大的單元格中。

table { 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    border: thick solid green; 
 
    caption-side: right; 
 
    border-collapse: collapse; 
 
} 
 

 
h1 { 
 
    color: red; 
 
    border-bottom: thin dotted red; 
 
} 
 

 
td, th { 
 
    border: thin dotted gray; 
 
    padding: 5px; 
 

 
} 
 

 
th { 
 
    color: orange; 
 
    background-color: purple; 
 

 
} 
 
td:first-child { 
 
    color: orange; 
 
    background-color: purple; 
 
} 
 

 

 
caption { 
 
    font-style: italic; 
 

 
} 
 
.center { text-align: center; }

<table> 
 
     <caption> 
 
     Winter 
 
     <br> 
 
     2016 
 
     <br> 
 
     Schedule 
 
     </caption> 
 
      <tr> 
 
       <th>  </th> 
 
       <th>Monday</th> 
 
       <th>Tuesday</th> 
 
       <th>Wednesday</th> 
 
       <th>Thursday</th> 
 
       <th>Friday</th> 
 
      </tr> 
 
     <tr> 
 
      <td>8:30</td> 
 
      <td>IS 210</td> 
 
      <td>IS 210</td> 
 
      <td>IS 210</td> 
 
      <td>IS 210</td> 
 
      <td>IS 210</td> 
 
     </tr> 
 
     <tr> 
 
      <td>9:30</td> 
 
      <td colspan="2" class="center" >Office Hours</td> 
 
      <td>IS 107</td> 
 
      <td>IS 107</td> 
 
      <td>IS 107</td> 
 
     </tr> 
 
     <tr> 
 
      <td>10:30</td> 
 
      <td>IS 105</td> 
 
      <td>IS 105</td> 
 
      <td>IS 105</td> 
 
      <td rowspan="2" colspan="2" class="center"> Office Hours</td> 
 
     </tr> 
 
     <tr> 
 
      <td>11:30</td> 
 
      <td>IS 120</td> 
 
      <td>IS 120</td> 
 
      <td>IS 120</td> 
 
     </tr> 
 
     <tr> 
 
      <td>12:30</td> 
 
      <td colspan="5" class="center">Lunch</td> 
 
     </tr> 
 

 
    </table>

來源

2017-03-10 19:21:51 Johannes

使用colspan水平合併單元格和rowspan垂直合併單元格。

這是更新的代碼片段，我刪除了一些額外的td。

table { 
 
     margin-left: 20px; 
 
     margin-right: 20px; 
 
     border: thick solid green; 
 
     caption-side: right; 
 
     border-collapse: collapse; 
 
    } 
 

 
    h1 { 
 
     color: red; 
 
     border-bottom: thin dotted red; 
 
    } 
 

 
    td, th { 
 
     border: thin dotted gray; 
 
     padding: 5px; 
 

 
    } 
 

 
    th { 
 
     color: orange; 
 
     background-color: purple; 
 

 
    } 
 
    td:first-child { 
 
     color: orange; 
 
     background-color: purple; 
 
    } 
 

 

 
    caption { 
 
     font-style: italic; 
 

 
    }

<!Doctype html> 
 
    <html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <link rel="stylesheet" href="schedule.css"> 
 

 

 
     <title>My Sample ScheduleR_M</title> 
 
    </head> 
 

 
    <body> 
 
     <h1>R_M Fake Winter Schedule</h1> 
 
     <table> 
 
     <caption> 
 
     Winter 
 
     <br> 
 
     2016 
 
     <br> 
 
     Schedule 
 
     </caption> 
 
      <tr> 
 
       <th>  </th> 
 
       <th>Monday</th> 
 
       <th>Tuesday</th> 
 
       <th>Wednesday</th> 
 
       <th>Thursday</th> 
 
       <th>Friday</th> 
 
      </tr> 
 
     <tr> 
 
      <td>8:30</td> 
 
      <td>IS 210</td> 
 
      <td>IS 210</td> 
 
      <td>IS 210</td> 
 
      <td>IS 210</td> 
 
      <td>IS 210</td> 
 
     </tr> 
 
     <tr> 
 
      <td>9:30</td> 
 
      <td colspan="2">Office Hours</td> 
 
      <td>IS 107</td> 
 
      <td>IS 107</td> 
 
      <td>IS 107</td> 
 
     </tr> 
 
     <tr> 
 
      <td>10:30</td> 
 
      <td>IS 105</td> 
 
      <td>IS 105</td> 
 
      <td>IS 105</td> 
 
      <td rowspan="2" colspan="2" class="space"> Office Space </td> 
 
     </tr> 
 
     <tr> 
 
      <td>11:30</td> 
 
      <td>IS 120</td> 
 
      <td>IS 120</td> 
 
      <td>IS 120</td> 
 
      
 
     </tr> 
 
     <tr> 
 
      <td>12:30</td> 
 
      <td colspan="5">Lunch</td> 
 
     </tr> 
 

 
    </table> 
 
    </body> 
 
    </html>

來源

2017-03-10 04:16:42 aje

回答

相關問題