3
\$\begingroup\$

Please let me know if you think I can improve the structure of his table code.

<table>
  <tbody>
    <tr>
      <th rowspan="2">Date</th>

      <th rowspan="2">Tournament</th>

      <th colspan="8">Tournament Scores</th>

      <th colspan="2">Result</th>

      <th rowspan="2">Score
        <br>Card
      </th>
    </tr>


    <tr>
      <th>Event/Scores Type</th>

      <th>Score</th>

      <th nowrap>-Par+</th>

      <th>R1</th>

      <th>R2</th>

      <th>R3</th>

      <th>R4</th>

      <th>R5</th>

      <th>Pos.</th>

      <th>SAR</th>
    </tr>


    <tr>
      <td>06-02-14</td>

      <td>Tourn</td>

      <td>(Gross)</td>

      <td>148</td>

      <td>+5</td>

      <td>72</td>

      <td>76</td>

    </tr>
  </tbody>
</table>

Image

\$\endgroup\$
1
\$\begingroup\$

Condider drawing borders at least around the header cells, to make the header structure easier to see. Wrap the two header cell rows in a thead element; this helps e.g. when the page is printed (the thead rows are repeated at the start of a new page in many moder browsers), and otherwise. Accessibility would be improved by adding extra markup that associates data cells with header cells, but it’s difficult to say what would be the best approach here.

<table border cellspacing=0>
  <thead>
    <tr>
      <th rowspan="2">Date</th>

      <th rowspan="2">Tournament</th>

      <th colspan="8">Tournament Scores</th>

      <th colspan="2">Result</th>

      <th rowspan="2">Score
        <br>Card
      </th>
    </tr>


    <tr>
      <th>Event/Scores Type</th>

      <th>Score</th>

      <th nowrap>-Par+</th>

      <th>R1</th>

      <th>R2</th>

      <th>R3</th>

      <th>R4</th>

      <th>R5</th>

      <th>Pos.</th>

      <th>SAR</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>06-02-14</td>

      <td>Tourn</td>

      <td>(Gross)</td>

      <td>148</td>

      <td>+5</td>

      <td>72</td>

      <td>76</td>

    </tr>
  </tbody>
</table>

\$\endgroup\$
1
  • \$\begingroup\$ -1: you should style using CSS. \$\endgroup\$
    – ANeves
    Nov 4 '14 at 14:25
1
\$\begingroup\$

You have what appears to be an unnecessary break tag here.

<th rowspan="2">Score<br>
    Card</th>
</tr>
\$\endgroup\$
3
  • \$\begingroup\$ Someone added the stack snippet as I was answering. It's much clearer now. \$\endgroup\$
    – RubberDuck
    Nov 3 '14 at 11:12
  • \$\begingroup\$ rowspan is preferred in this case, where you have multiple rows of headers \$\endgroup\$
    – albert
    Nov 4 '14 at 13:44
  • \$\begingroup\$ @albert you're right. It wasn't clear to me that's what was going on when I posted. I've not had time to update my answer. \$\endgroup\$
    – RubberDuck
    Nov 4 '14 at 14:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.