Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rowspan upwards

I'm trying to program a javascript timeline, in which you click on the left column revealing something in the right column. I suppose there are easier ways to do this, but the HTML below looks really really neat.

So the usual way rowspan works is that you have a td that you want to extend down a few rows to complete the table.

<tr>
    <td>1942</td>
    <td rowspan=2>Something happened</td>
</tr>
<tr>
    <td>2017</td>
</tr>

However, what if I want to rowspan upwards, so that the below timeline item fills both rows?

<tr>
    <td>1942</td>
</tr>
<tr>
    <td>2017</td>
    <td rowspan=2>Something else happened</td>
</tr>

I know I can just move them all to the top row and rowspan from there, but I really want to have this nice, easy-to-edit format, with dates and rows right next to each other.

(An idea I had was that if you think of rowspan as analogous to css width and height, there might be something analogous to css left and top (like "table-row"?) you could set, other than actually moving the td's to the tr you want. I don't think that exists, though.)

(also, does anyone know if negative rowspan is defined?)

like image 836
oink Avatar asked Dec 28 '13 18:12

oink


People also ask

What is meant by Rowspan?

The rowspan attribute in HTML specifies the number of rows a cell should span. That is if a row spans two rows, it means it will take up the space of two rows in that table. It allows the single table cell to span the height of more than one cell or row.

What is Colspan Rowspan?

The rowspan and colspan are <td> tag attributes. These are used to specify the number of rows or columns a cell should span. The rowspan attribute is for rows as well as the colspan attribute is for columns. These attributes have numeric values, for example, colspan=3 will span three columns.

Can we use Rowspan and colspan together?

Of course, you can mix colspan and rowspan to get a range of various tables. Example 4-13 demonstrates a mix of column and row spanning.

How do you merge cells vertically in HTML table?

To merge cells in HTML, use the colspan and rowspan attribute. The rowspan attribute is for the number of rows a cell should span, whereas the colspan attribute is for a number of columns a cell should span. Both the attribute will be inside the <td> tag.

What is a rowspan in HTML?

Last Updated : 22 Jul, 2019. The rowspan attribute in HTML specifies the number of rows a cell should span. That is if a row spans two rows, it means it will take up the space of two rows in that table. It allows the single table cell to span the height of more than one cell or row.

What does colspan= or rowspan= do?

What does colspan= do? Allows a single table cell to span the width of more than one cell or column. What does rowspan= do? Allows a single table cell to span the height of more than one cell or row. Why use colspan= or rowspan=? Sometimes it makes sense for a cell to span multiple columns or multiple rows.

What does it mean if a row spans two rows?

That is if a row spans two rows, it means it will take up the space of two rows in that table. It allows the single table cell to span the height of more than one cell or row.

How do you span a row in a table?

With rowspan="0", the cell will span until the last row of the table. Number of rows a table cell will span. The following elements accept the rowspan attribute.


1 Answers

No, rowspan always works “downwards”. HTML 4 does not explicitly say this, but it is definitely implied, and there is no way to change it. HTML5 makes it explicit, in its boringly detailed (but necessary for implementors) Processing model for tables.

like image 85
Jukka K. Korpela Avatar answered Oct 04 '22 05:10

Jukka K. Korpela