so is it basically a normal table with an extra header with columns and rows grouped at the end, it is possible to do something like this in HTML or maybe using css?
If you use rowspan you can make it work
<td rowspan="3"></td>
Will make a cell in one column span 3 rows. Read up more here: https://www.tutorialspoint.com/What-are-table-rowspan-and-colspan-in-HTML#:~:text=The%20rowspan%20and%20colspan%20are,3%20will%20span%20three%20columns.
Related
Sorry to ask this simple question. But I seem not to be able to find some reasonable answer to it.
I want to make a table with 3 columns but all three having different number of data. say, 1st column has only 1 data. 2nd one has 3 and 3rd one has also 3 data. It should look like this:
is there another way than defining empty tds for the first and second tr to create empty slots?
You can use rowspan http://jsfiddle.net/vB2jY/
This will make the td cell occupy the number of rows mentioned.
<table>
<tr><td rowspan="4">1</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
I think a table is best suited only for displaying tabular data, and not complex layouts like what you describe.
Still you can achieve this by using the rowspan attribute for the data in the first column, to extend to 3 rows.
I need to combine two rows in a table into a single row so that I can apply a style (background with a gradient) on that row.
I tried to use rowspan on a table cell with colspan = number of total columns but that does not work.
Tried to use a nested table inside the main table header, but in that case the table background does not have the desired style.
Demo: http://jsfiddle.net/Debarupa/EyxkJ/3/
If you look at the demo, I need to have "Additional Info" and the column headers merged to a single row so that the style 'gridheader' can be applied to them as one row.
Ideas anyone? Thanks for any assistance in advance.
Try using two different classes for top two rows you want to combine. Then break gradient onto two, for each of these rows with color changing 0-50% for the first one and 50-100% for the second one.
Here is the example:
http://jsfiddle.net/EyxkJ/5/
Not sure if this is the most elegant solution though.
I have created a sample with nested table into table cell for the header.
is it possible to insert a table row that doesn't adhere to any columns? This is, say for example a message displayed or an advertisement placed somewhere inside the table.
Thank you!
Yes, you'll just have to do the following:
<tr>
<td colspan="3">This is a message</td>
</tr>
Setting colspan to the number of columns your table has will make this row appear to span the entire table.
no you cant do this since it is not valid.
you cant add Tr without TD.
what you can do is insert with 1 td and use colSpan as much as you need.
Here's my problem: I have an HTML table that looks like this:
What I want is for there to be an additional table row underneath it, except this row spans the full width of the table - but with just one cell. I quickly mocked up an example:
As you can see I added another Table Row below it with a single <td> cell inside containing the text. However I want this cell to span 100% of the width of the entire table - it shouldn't resize the width of the 'Name' column.
Is such a thing possible? I am happy to use jQuery or Javascript if needs be - also, this doesn't need to work in IE as every user is using Chrome (although that would be a perk).
In your case, you'd do something like
<tr>
<td colspan="5">This text should be as long as the entire table's width...</td>
</tr>
The colspan attribute says how many columns the cell should take up. It should work in all browsers that support tables, as it's standard HTML.
In JavaScript, you'd set the colSpan property of the cell, or call .setAttribute("colspan", the_number_of_columns) on it. Either should work. But unless you're generating the cell dynamically, you should just include the colspan attribute in your HTML.
For one cell to span all 5 columns,
<td colspan="5">Lorem Ipsum</td>
I know a similar question on this topic has been asked, but doesn't look like there was a definitive solution. So with that, here's my fiddle:
http://jsfiddle.net/UjAQf/24/
I want to split the table cell under the "Pick" heading vertically. I'd prefer a solution that doesn't require JS or anything wonky, if possible.
Actually you could have used rowspan=2 HTML property for the other cells, and then you could have you cell splited vertically
http://jsfiddle.net/Ty44J/
http://www.w3schools.com/tags/att_td_rowspan.asp
You can't really split a cell vertically, but if you add another cell after it in each of the table body rows and give the heading row a colspan="2" you can have two different cells under one heading.
http://jsfiddle.net/UjAQf/26/