Rowspan not using top row - html

I don't understand why my column won't span to the top and bottom rows I created. It is supposed to look like the "Today" column is taller on the top and bottom then the other columns.
It's a lot of code, and I wasn't sure what I should cut without deforming it all or adding a new variable (it needs a fluid height).
JSFiddle: http://jsfiddle.net/DaAwesomeP/aU9Le/
Basic HTML Layout:
<table id="weatherForecast">
<tr class="weatherForecast-row-outer">
<td></td>
</tr>
<tr id="weatherForecast-row">
<td id="weatherForecast-DATE" class="weatherForecast-day weatherForecast-day-today" rowspan="3">
<!-- Cell Content for "Today" Here -->
<td id="weatherForecast-DATE" class="weatherForecast-day ">
<!-- Cell Content Here -->
</td>
</tr>
<tr class="weatherForecast-row-outer">
<td></td>
</tr>
</table>
Here is an image that shows what I want:

The table markup violates the HTML table model rules, as the W3C HTML Validator tells you if you use it in HTML5 mode.
Since there are two cells on the second row, the first row should occupy two columns, too, so set colspan=2 on its td element.
And you cannot use rowspan=3, since there aren’t just enough rows in the table to span. Use rowspan=2 instead.
It’s difficult to tell what you actually want (a drawing would have helped), but the following would at least be valid HTML (note that I fixed a problem with duplicate id values too):
<table id="weatherForecast" border>
<tr class="weatherForecast-row-outer">
<td colspan=2></td>
</tr>
<tr id="weatherForecast-row">
<td id="weatherForecast-DATE" class="weatherForecast-day weatherForecast-day-today" rowspan="2">
<!-- Cell Content for "Today" Here -->
<td id="weatherForecast-DATE2" class="weatherForecast-day ">
<!-- Cell Content Here -->
</td>
</tr>
<tr class="weatherForecast-row-outer">
<td></td>
</tr>

I got rid of the all of the rowspan and just gave one cell display: block. I can then adjust the height of that cell specifically without changing the others. I used calc to provide a variable height.

Related

Incorporating a table inside a table in HTML

I am trying to create an HTML table where there are four columns and any number of rows. Inside this table, the first two columns are just normal cells. The latter two columns can have multiple rows WITHIN a row in the top-level table. My issue is how I can properly align the column separators, even if the length of the content in each cell is variable.
My attempt tries to make use of:
<td colspan=2>
Example of what I am trying to do: https://jsfiddle.net/hurnzhmq/
The things I am missing in the JSFiddle are:
There is no divider between the two rows separating Content3A/Content4A from Content3B/Content4B - I tried using the "bottom-border:none" for the last child, but that did not seem to work.
The column separators between Content3A/Content3B and Content4A/Content4B are not lined up with the header's column separator, and do not touch the ends of the table (there are gaps).
Any advice on how I might go about fixing this would be greatly appreciated!
I think you should use rowspan instead colspan
you can use code below
<html>
<table border=1 >
<tr>
<td>Header1</td>
<td>Header2</td>
<td>Header3</td>
<td>Header4</td>
</tr>
<!-- Content -->
<tr>
<td rowspan="2">Content1</td>
<td rowspan="2" >Content2</td>
<td > Content3A</td>
<td > Content2</td>
</tr>
<tr>
<td > Content3B</td>
<td > Content2</td>
</tr>
</table>
</html>

Why am I getting odd html table results with this standard syntax?

I'm using this code on my wordpress site but I'm getting odd results. I want to divide the table row into two columns, but I've ended up just gluing an extra bit on the side. what am I doing wrong?
<table>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
<tr>
<td style="padding:0px;">
this is a test
</td>
<td style="padding:0px;">
as is this
</td>
</tr>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
</table>
and I get this weird little bit off the edge rather than the split I want:
Is it something to do with the aligned right image content in the table below possibly?
The number of columns in a table must be constant.
Add colspan="2" to your single cells.
A table has as many columns as the row with the most columns in it. If cells are missing from other rows, then they are left out from the rendering and cells are not stretched to fit.
Use colspan to make a cell take up multiple columns.
In your case, you don't appear to have tabular data at all, so don't use a table in the first place.
Your second row is two columns wide, but the remaining rows are still just one column in width. Either add a second column to each of the other rows, or extend the cells in the other columns so that they cover two columns, like this:
<tr>
<td style="padding:0px;" colspan=2>
deleted the content to make this less to read
</td>
</tr>
You'll need to do that for all the rows with just one column.

Colspan with incorrect rows don't render correctly

http://jsfiddle.net/9p7Mx/1/
I'm sure this has been asked before but I can't find the correct search terms:
If you have an HTML table such as:
<table>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="3"> </td>
<td> </td>
</tr>
</table>
The colspan=3 on the last row will not actually line up correctly because you don't actually have 4 td elements. If you look at my example link, I have two tables, one with two tds with colspan=2 and the last with four actual tds. In the first, the td elements are just mimicking 4 tds with their own colspan=2 and thus I assume the table has no way of knowing exactly how large a single colspan is since there is none. Without knowing the exact with on a single colspan, it appears the table doesn't know what to do.
If I can't change the number of td elements in the table, is it possible to get the same effect? I'd rather not assign a width using CSS, and assigning a width WILL work (tested) but I'd like to see if there is another way.
The markup violates the HTML table model, as http://validator.w3.org tells if you use it in HTML5 mode (“Table column 2 established by element td has no cells beginning in it.”). So you should expect inconsistent and unexpected rendering.
If your table logically has just three columns, make it so. Instead of trying to make some columns wider by using colspan, use CSS to set the widths. The colspan=2 attribute means just that the cell spans two columns. And you cannot validly span a column that does not exist.
Using classes and setting the width for the X% you want.
You must consider some divs instead of a table.

Table row span cell span

This is an assignment I need help with. I hate tables as is, but this is what it says:
"The first row in each table consists of one table cell which spans two columns that contain the real estate listing name. The second row in each table consists of two table cells."
My code:
<table>
<tr>
<th>
<h3>TEST</h3>
</th>
</tr>
<th rowspan="2"></th>
<td>Something here !</td>
</tr>
</table>
Just wanted to verify if I did this correctly? Here's the full code:
http://jsfiddle.net/4jzUc/
also, it's supposed to look like this: http://screencloud.net/v/aA5Y
You want to span the column, not the row (colspan vs rowspan). I think this is what you are looking for.
<table>
<tr>
<th colspan="2">
Title
</th>
</tr>
<tr>
<td>First cell</td>
</tr>
<tr>
<td>Second cell</td>
</tr>
</table>
No, your markup is not correct. It does not even comply with the HTML table model, as you can see by using http://validator.nu on your document with <!doctype html> slapped at the start. Still less it does do what the assignment calls for.
The assignment as such is very simple: you just a table with two rows and two columns, just so that the first row has only one cell, which spans two columns:
<table>
<tr><td colspan=2>Real estate name
<tr><td>A table cell <td>Another table cell
</table>
You could use th instead of the first td, since it is kind of a header cell, but beware then that this makes its content bold and centered by default (you can override this is in CSS).
As per the “supposed to look like” link, it seems that you are supposed to put an img element only in the first cell of the second row, and the second cell there contains text and a ul element. And a little bit of CSS too. Note that for this output, you will need to align the second row vertically to the top (using the HTML valign attribute or the CSS vertical-align property).
correct code:
<table>
<tr>
<th>
<h3>TEST</h3>
</th>
<th rowspan="2">RowSpan2!</th>
</tr>
<tr>
<td>Something here !</td>
</tr>
<tr>
<td>Something Else !</td>
</tr>
</table>

Table rows become inline if rowspan is set for all the cells of the row

Here is what I need to do.
I'm creating a grid with widgets that are supposed to be represented in a table. Each widget has a variable width that represents the colspan of the td that contains it, and a height of 1 or 2 that is supposed to represent the rowspan of that cells.
Everything works fine, until I'm having a case where all the cells of a row have a colspan of 2, and the next row can have any type of cells. The next row is getting displayed right next to the previous row instead of the next one.
Here is a jsfiddle that replicates the problem and here is the code:
<table>
<tr>
<td rowspan = "2">ONE</td>
</tr>
<tr>
<td rowspan = "1">1</td>
<td rowspan = "1">2</td>
<td rowspan = "1">3</td>
<td rowspan = "1">4</td>
</tr>
</table>
Is this a bug? Am I doing something wrong?
EDIT: To be clear, what I want to do, is having a row of widgets that have twice the height of a regular row
It's difficult to visualize exactly what you want, but perhaps you should be using block elements rather than a table. A table should only be used for tabular data. The rowspan attribute won't function correctly if there aren't any rows to span.
<table>
<tr>
<td rowspan="2">ONE</td>
<td>TWO</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
See the fiddle
Instead of forcing a thing to two rows, which is normally only done when you have more cells in that set of rows, simply set the cell's height:
http://jsfiddle.net/vjPMw/5/
td {
height: 20px;
background-color: #eee;
}
td.doubleheight {
height: 40px;
}
<table>
<tr>
<td class="doubleheight">ONE</td>
</tr>
<tr>
<td rowspan = "1">1</td>
<td rowspan = "1">2</td>
<td rowspan = "1">3</td>
<td rowspan = "1">4</td>
</tr>
</table>
Really, I'd have expected even that to be unnecessary, as a cell normally expands to contain its contents. Maybe a more complete demo of your situation is in order. Also, I agree with Aarolama Bluenk that maybe a table isn't the right approach here to begin with.
The first row has 1 cell with rowspan=2, so html expects next row to be the one which is "spanned", however you've added row with 4 td's.
I'd recommend adding empty <tr></tr> after first one and play with it OR fix first td to: <td rowspan="2" colspan="4">ONE</td>