CODEWITHSUNDEEP
htmlhtml-table
canine_rapscallion
canine_rapscallion

Reputation: 1

HTML RowSpan Formatting Issue

Ok, so I am creating a table that is supposed to look like this:

Desired Result

I have the table element portion of my HTML code below:

<table class="schedule">
  <tr>
    <th>Time</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
    <th>Sun</th>
  </tr>
  <tr>
    <th>6:00 PM</th>
    <td colspan="7">National News</td>
  </tr>
  <tr>
    <th>6:30 PM</th>
    <td colspan="7">World News</td>
  </tr>
  <tr>
    <th>7:00 PM</th>
    <td rowspan="2">Opera Fest</td>
    <td rowspan="2">Radio U</td>
    <td rowspan="2">Science Week</td>
    <td rowspan="2">The Living World</td>
    <td>Word Play</td>
    <td>Agri-Week</td>
    <td rowspan="2">Folk Fest</td>
  </tr>
  <tr>
    <th>7:30 PM
      <th>
        <td>Brain Stew</td>
        <td>Bismarck Forum</td>
  </tr>
</table>

But when I open the HTML file in any browser I get this table instead:

Result I Get

Upvotes: 0

Views: 43

Answers (1)

Nick Vu
Nick Vu

Reputation: 15520

You make a small mistake at

<th>7:30 PM<th>

That missing closed tag makes HTML think you have 2 th (not only 1 as you expected)

The fix could be making the 2nd th to be a closed tag

<th>7:30 PM</th>

Full HTML

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid;
}
<table class="schedule">
        <tr>
            <th>Time</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
            <th>Sun</th>
        </tr>
        <tr>
            <th>6:00 PM</th>
            <td colspan="7">National News</td>
        </tr>
        <tr>
            <th>6:30 PM</th>
            <td colspan="7">World News</td>
        </tr>
        <tr>
            <th>7:00 PM</th>
            <td rowspan="2">Opera Fest</td>
            <td rowspan="2">Radio U</td>
            <td rowspan="2">Science Week</td>
            <td rowspan="2">The Living World</td>
            <td>Word Play</td>
            <td>Agri-Week</td>
            <td rowspan="2">Folk Fest</td>
        </tr>
        <tr>
        <th>7:30 PM</th>
            <td>Brain Stew</td>
            <td>Bismarck Forum</td>
        </tr>
    </table>

Upvotes: 1

Related Questions