htmlhtml-table

HTML Table: Removing borders around empty cells


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>

Solution

  • 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.