テーブルを広げる

Iveは私の例をかなり近づけましたが、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 私は私が身近に感じたwrong..like誰かがイムがやって何を説明できる場合、私は、点検と単純に道をそれを出すために見ることができないPDF形式でそれを得る...ありがとう男は、私は上記のコードは私が間違っているのどの空の新しいTR列をがあることが原因となって、十分な情報

<!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テーブルセルを結合" のためのGoogleを検索し、これを見つけたhttp://www.computerhope.com/issues/ch001655.htm – Benrobot

rowspansとcolspansの基本的な原理は次のとおりです。あなたが最初の行にtd例rowspan:2のために使用している場合は、2番目の行は、最初よりも1列を持っている必要があり、その1つのセルが上から2番目の行まで下に伸びているからです。 colspansと同じです。

最後の行のように行内にcolspan = 5がある場合、1 + 5は他の行にある6まで加算されるため、2セル/ tdが必要です。

以下の例では、colspansとrowspansを使用してサンプルを再作成しました。私はまた、それらの大きなセルにテキストを中央に置くためにいくつかの列にまたがるtdに "center"というクラスを割り当てました。

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

USe 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

答えて

関連する問題