HTML 表结构复杂

Question

I am having difficulty in creating the table in the image below:

complex table (the image itself is not appearing, please click on the link)

I have searched on stackoverflow but the answer is given without much explanation. Below is the code only for the complex row, that is the row that starts with cell containing "Tuesday"

<table border="1">
  <tr>
    <td rowspan="6">Tuesday</td>
    <td rowspan="2">8:00 am</td>
    <td rowspan="2">11:00 am</td>
    <td rowspan="3">XPath</td>
  </tr>
  <tr>
    <td rowspan="2">11:00 am</td>
    <td rowspan="2">2:00 pm</td>
    <td rowspan="3">XSL Transformations</td>
  </tr>
  <tr>
    <td rowspan="2">2:00 am</td>
    <td rowspan="2">5:00 pm</td>
  </tr>
</table>

With the above code, I am using three TRs, that is expected to produce three rows but only one row is being produced. The result of the above code is shown below. I am failing to understand why the row starting with "11:00 am", that is the circled row is not on a new line.

actual result (the image itself is not appearing, please click on the link)

Answer 1

You created the structure for 6 rows, but your markup had only 3, and the 2nd row contained both spanned cells from the 1st row and the cells defined in the 2nd row. That's why the browser tried to stack them horizontally.

To get the desired result, you should add 3 extra rows to your table and distribute cells between them so that each cell starts in the correct row ("XSL Transformations" in the 4th row, others in the 1st, 3rd and 5th rows respectively): see 1st example below.

By the way, the same visual result can be achieved with only 4 rows: see the 2nd example below.

 <table border="1"> <tr> <td rowspan="6">Tuesday</td> <td rowspan="2">8:00 am</td> <td rowspan="2">11:00 am</td> <td rowspan="3">XPath</td> </tr> <tr></tr><:-- needed to accomodate cells with rowspan="2" from above --> <tr> <td rowspan="2">11:00 am</td> <td rowspan="2">2:00 pm</td> </tr> <tr> <td rowspan="3">XSL Transformations</td> </tr> <tr> <td rowspan="2">2:00 am</td> <td rowspan="2">5:00 pm</td> </tr> <tr></tr><:-- needed to accomodate cells with rowspan="2" from above --> </table> <hr> <table border="1"> <tr><:-- row 1 --> <td rowspan="4">Tuesday</td><:-- spans rows 1-4 --> <td>8:00 am</td><:-- spans row 1 only --> <td>11:00 am</td><!-- spans row 1 only --> <td rowspan="2">XPath</td><!-- spans rows 1-2 --> </tr> <tr><!-- row 2 --> <td rowspan="2">11:00 am</td><!-- spans rows 2-3 --> <td rowspan="2">2:00 pm</td><!-- spans rows 2-3 --> </tr> <tr><!-- row 3 --> <td rowspan="2">XSL Transformations</td><!-- spans rows 3-4 --> </tr> <tr><!-- row 4 --> <td>2:00 am</td><!-- spans row 4 only --> <td>5:00 pm</td><!-- spans row 4 only --> </tr> </table>

Answer 2

You maybe just should remove rowspan from hour's to obtain a better result.

<table border="1">
  <tr>
    <td rowspan="6">Tuesday</td>
    <td>8:00 am</td>
    <td>11:00 am</td>
    <td rowspan="3">XPath</td>
  </tr>
  <tr>
    <td>11:00 am</td>
    <td>2:00 pm</td>
    <td rowspan="3">XSL Transformations</td>
  </tr>
  <tr>
    <td>2:00 am</td>
    <td>5:00 pm</td>
  </tr>
</table>

I'm not sure to understand want you want, can you post a drawing of the expected result?