HTML Table Colspan

Question

I am making a calendar using the following HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>
    <table border="1">
        <tr>
            <td colspan="2">Mon</td>
            <td colspan="2">Tue</td>
            <td colspan="2">Wed</td>
            <td colspan="2">Thu</td>
            <td colspan="2">Fri</td>
        </tr>
        <tr>
            <td colspan="1">Item1</td>
            <td colspan="9">Item2</td>
        </tr>
    </table>
</body>

Each day has a colspan of 2 so that I can show whether an item takes place just in the morning or for a whole day etc.

In the above example I want "Item1" to show in the first cell (Mon morning) and "Item2" to show from Mon afternoon through to Fri.

However, when viewing the output, "Item1" is taking up the whole of Mon and "Item2" is displaying from Tue to Fri.

Is it possible to do what I am trying to do?

Thanks

score 1 · Accepted Answer · answered Jan 22 '12 at 14:57

I think the problem is that you'll actually have to have a row with colspan="1" in order for your spans to actually work.

If you're actually representing am/pm in your calendar, why not just add a row under the "Mon Tue ... Fri" row, like so:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <style>
    td,th { min-width: 50px; }
  </style>
</head>
<body>
  <table border="1">
    <thead>
      <tr>
        <th colspan="2">Mon</th>
        <th colspan="2">Tue</th>
        <th colspan="2">Wed</th>
        <th colspan="2">Thu</th>
        <th colspan="2">Fri</th>
      </tr>
      <tr>
        <th>AM</th>
        <th>PM</th>
        <th>AM</th>
        <th>PM</th>
        <th>AM</th>
        <th>PM</th>
        <th>AM</th>
        <th>PM</th>
        <th>AM</th>
        <th>PM</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="1">Item1</td>
        <td colspan="9">Item2</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

I also put the headers into a <thead> and the actual items into a <tbody>, and made the headers <th> tags instead of <td>.

Thanks for your reply, This has done the job. Somebody else had suggested this to me but I was hoping to avoid as the calendar may eventually expand to a month view and 31 AM/PM's may get a bit cluttered. Thanks again — chester600, Jan 22 '12 at 15:30
Well, you cooud have a separate view for the month view, as most other calendars do. Also, if this answered your question, would you mind accepting the answer? — Frost, Jan 22 '12 at 15:46

score 0 · Answer 2 · answered Jan 22 '12 at 14:49

0

Try this:

<td colspan="1">Item1</td>
<td colspan="1">&nbsp;</td>
<td colspan="8">Item2</td>

answered Jan 22 '12 at 14:49

Sparky

14,967
2
31
45

Thanks for your quick reply. Doing that puts an empty cell for the second cell of Mon, where I would like the second cell of Mon to be part of the "Item2" cell. – chester600 Jan 22 '12 at 14:59
Sorry I misunderstood what you were trying to achieve. What you are doing should work, but table rendering in browsers can sometime have unpredictable results. Try setting the COLWIDTH properties to force the table to use a particular size (say 10%) per column, see if that helps... – Sparky Jan 22 '12 at 15:08
No problem, I was probably a bit unclear in my question. Setting the width seems to have no effect on the display of the table. The reply by Frost seems to have done the job. Thanks for your help. – chester600 Jan 22 '12 at 15:25

HTML Table Colspan

2 Answers2

Linked