I'm trying to recreate our class schedule in html, my problem is everytime i do rowspan in my table it gets excess amount of cells in the right side of the table or colspan the other cells gets messed up or resized. What did I do wrong can someone explain?tyia
This is what I'm trying to recreate
I also want the Time column border to get thick like the original table but when I do style it nothing happens.
CodePudding user response：
As attached img shows to create such table you will require to use appropriate rowspan and colspan attribute for <td> element.
The output img shows you have used the rowspan and colspan but forgot to remove the extra <td> which left as it is when you use rowspan and colspan attribute and thus you are getting extra column with rows at the end of table.
See if this snippet helps you:
table {
border: 2px solid black;
border-collapse: collapse;
padding: 10px;
font-size:10px;
}
table th {
border: 2px solid black;
padding: 10px;
background: white;
color: black;
}
table td {
border: 2px solid black;
text-align: center;
padding: 10px;
background: white;
color: black;
}<table>
<thead>
<tr>
<th colspan=2>TIME</th>
<th>MONDAY</th>
<th>TUESDAY</th>
<th>WEDNESDAY</th>
<th>THURSDAY</th>
<th>FRIDAY</th>
<th>SATURDAY</th>
</tr>
</thead>
<tbody>
<tr>
<td>7.00</td>
<td>7.30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7.30</td>
<td>8.00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8.00</td>
<td>8.30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8.30</td>
<td>9.00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9.00</td>
<td>9.30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9.30</td>
<td>10.00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>10.00</td>
<td>10.30</td>
<td rowspan="6">GNED 02<br> BSIT 1-4<br> Ms. Afiano</td>
<td rowspan="6">DCIT 21 (LAB)<br> BSIT 1-4<br> Ms. Villavicencio</td>
<td rowspan="2">DCIT 22 (LAB)<br> BSIT 1-4<br> Mr. Rocillo</td>
<td></td>
<td></td>
<td rowspan="6">CoSC S0<br> BSIT 1-4<br> Mr. Dula</td>
</tr>
<tr>
<td>10.30</td>
<td>11.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>11.00</td>
<td>11.30</td>
<td rowspan="4">DCIT 21 (LAB)<br> BSIT 1-4<br> Ms. Villavicencio</td>
<td></td>
<td></td>
</tr>
<tr>
<td>11.30</td>
<td>12.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>12.00</td>
<td>12.30</td>
<td></td>
<td></td>
</tr>
<tr>
<td>12.30</td>
<td>1.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>1.00</td>
<td>1.30</td>
<td rowspan="6">GNED 05<br> BSIT 1-4<br> Dr. Tosco</td>
<td rowspan="12">DCIT 22 (LAB)<br> BSIT 1-4<br> Mr. Rocillo</td>
<td rowspan="4">FIIT 1<br> BSIT 1-4<br> Mr. Galang</td>
<td rowspan="6">GNED 11<br> BSIT 1-4<br> Mr. Verano</td>
<td></td>
<td></td>
</tr>
<tr>
<td>1.30</td>
<td>2.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>2.00</td>
<td>2.30</td>
<td></td>
<td></td>
</tr>
<tr>
<td>2.30</td>
<td>3.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3.00</td>
<td>3.30</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3.30</td>
<td>4.00</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4.00</td>
<td>4.30</td>
<td></td>
<td></td>
<td rowspan="2">CvSU 101 <br> BSIT 1-4<br>Ms. Busoo</td>
<td></td>
<td></td>
</tr>
<tr>
<td>4.30</td>
<td>5.00</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5.00</td>
<td>5.30</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5.30</td>
<td>6.00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6.00</td>
<td>6.30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6.30</td>
<td>7.00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7.00</td>
<td>7.30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7.30</td>
<td>8.00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>