For some reason I'm struggling with this, in HTML I'm practicing with tables by making a calendar. I have a table with headers and some data and everything works okay but I end up with borders around empty cells. I only want cells with data and the table itself to have a border.
Am I approaching this wrong?
Also, is there a way to write data to a specific cell in the table using row and column values?
Here is an edited portion of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Victor's Fall 2015 Timetable</title>
</head>
<body>
<table border="1">
<tr>
<th></th>
<th> Monday </th>
<th> Tuesday </th>
<th> Wedenesday </th>
<th> Thursday </th>
<th> Friday </th>
</tr>
<tr>
<th> 11:00 </th>
<td></td>
<td></td>
<td rowspan="2">Database Lecture</td>
<td></td>
<td></td>
</tr>
<tr>
<th> 11:30 </th>
</tr>
<tr>
<th> 12:00 </th>
<td></td>
<td rowspan="2">Communications Lecture</td>
<td rowspan="3">Database Lab</td>
<td></td>
<td rowspan="2">Java Lecture</td>
</tr>
<tr>
<th> 12:30 </th>
</tr>
<tr>
<th> 1:00 </th>
</tr>
</table>
</body>
</html>
You have to use for table css border-collapse: separate;empty-cells: hide;
There is example :
table
{
border-collapse: separate;
empty-cells: hide;
}
<table border="1">
<tr>
<th></th>
<th> Monday </th>
<th> Tuesday </th>
<th> Wedenesday </th>
<th> Thursday </th>
<th> Friday </th>
</tr>
<tr>
<th> 11:00 </th>
<td></td>
<td></td>
<td rowspan="2">Database Lecture</td>
<td></td>
<td></td>
</tr>
<tr>
<th> 11:30 </th>
</tr>
<tr>
<th> 12:00 </th>
<td></td>
<td rowspan="2">Communications Lecture</td>
<td rowspan="3">Database Lab</td>
<td></td>
<td rowspan="2">Java Lecture</td>
</tr>
<tr>
<th> 12:30 </th>
</tr>
<tr>
<th> 1:00 </th>
</tr>
</table>
Update based on OP comment :
It's in css file, but, if You not using css file (?) then You can put in table after border="1" ... just add style="border-collapse: separate; empty-cell:hide;"
<table border="1" style="border-collapse: separate; empty-cells: hide;"> ... and so one rest of Your html.