Question

I’m building a simple table using HTML tags. The source code goes like this:

<table class="tableClass">
    <thead>
        <tr>
            <th>Column Header</th>
            <th>Column Header</th>
        <tr>
    </thead>
    <tbody>     
            <tr>
                <td>Column Data</td>
                <td>Column Data</td>
            </tr>       
    </tbody>
</table>

When I try the table in the Browser in Head section it seems to be an empty row. I’ve tried it in Firefox and Chrome and the Debugger outputs this:

   <table class="tableClass">
        <thead>
            <tr>
                <th>Column Header</th>
                <th>Column Header</th>
            <tr>
            <tr></tr>
        </thead>

That empty row doesn’t appear anywhere in the code, but the Debugger seems to find it. Any ideas where could it come from? Is it related to the table style?

Answer 1

In the <thead> you are not closing the <tr> just making a new one.

<table class="tableClass">
    <thead>
        <tr>
            <th>Column Header</th>
            <th>Column Header</th>
        <tr> <!-- NOT CLOSED! -->
    </thead>
    <tbody>     
            <tr>
                <td>Column Data</td>
                <td>Column Data</td>
            </tr>       
    </tbody>
</table>

If you validate your HTML, you will avoid these errors.