I've made a html table and when I finished I noticed I made a mistake by having one row with 5 columns while all the others have 3. Is it possible to fix it by making 2 columns only half a column wide or auto adjust it using only html? I do not want to use colspan because its a pretty large table.
<table border="1">
<tr>
<td>something</td>
</tr>
<tr>
<td>these should be</td>
<td>as long as the others</td>
</tr>
<tr>
<td> something </td>
</tr>
</table>
Nested table
If you absolutely don't want to use colspan, you could try nesting a table:
<table border="1">
<tr>
<td>something</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td>these should be</td>
<td>as long as the others</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> something </td>
</tr>
</table>
Defining colspan might solve your problem.
colspan must be specified based on the row with largest column.
It is actually used to extend 2 or more columns as per your wish.
It also hugely depends on underlying columns.
<table border="1">
<tr>
<td colspan="2">Something</td>
</tr>
<tr>
<td>these should be<td>
<td>as long as the others</td>
</tr>
<tr>
<td colspan="2">Something</td>
</tr>
</table>
This must solve your issue.
EDIT: Since you need to span it without the use of colspan, you can use nested table.
<table border="1">
<tr>
<td colspan="2">Something</td>
</tr>
<tr>
<td>
<table border="0"> <!-- if you want border set it to 1 -->
<tr>
<td>this should be</td>
<td>as long as the others</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">Something</td>
</tr>
</table>
The above method goes little bit tricky. For this example it is easy to implement using above snippet. But for your exact solution, since you need to use it for rows with 5 columns.
MERGE 5 columns into 1 and span it to 3 columns:(as implemented below)
<tr>
<td colspan="3">
<table border="0"> <!-- if you want border set it to 1 -->
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
<td>col 5</td>
</tr>
</table>
</td>
</tr>
<table border="1">
<tr>
<td colspan="2">something</td>
</tr>
<tr>
<td>these should be</td>
<td>as long as the others</td>
</tr>
<tr>
<td colspan="2"> something </td>
</tr>
</table>
please see colspan definition here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
Related
I have the following HTML table.
<table id="table">
<tbody>
<tr>
<th>City</th>
</tr>
<tr>
<td>Madrid</td>
</tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tbody>
London, Paris and Rome have a class named show-on-top. As the name suggests I want to move all tr with show-on-top on top of the table. I can do that with the following code.
$("#table tbody").prepend($('.show-on-top'));
But the problem is that London, Paris and Rome are shown before <th> (the "City" heading). Of course I want to place show-on-top rows on top of the table but after heading (first row). So I came up with the following idea.
$("#table tbody tr:eq(1)").prepend($('.show-on-top'));
I'm almost there. All my show-on-top are placed after heading but they're nested inside a tr like follows.
<table id="table">
<tbody>
<tr>
<th>City</th>
</tr>
<tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tr>
<tr>
<td>Madrid</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
</tbody>
I can't understand how the heck all my rows are nested inside a tr. I'm tried with hundreds of combinations of parent, after, prepend, append with no success.
Bonus question. show-on-top rows have data-order attribute that represents the order I want to sort th rows in question (Paris > Rome > London). I used sort.data('order') but nothing happens. I can't even see anything in console.log().
Thank you for your time.
One thing you can do is move the heading rows out of <tbody> into <thead>
$("#table tbody").prepend($('.show-on-top'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Madrid</td>
</tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tbody>
</table>
Another solution is to use .after() to put the rows after the last row containing th.
$("#table tbody tr:has(th):last").after($(".show-on-top"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tbody>
<tr>
<th>City</th>
</tr>
<tr>
<td>Madrid</td>
</tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tbody>
</table>
You could use insertAfter() and :first selector
$(".show-on-top").insertAfter('#table tbody tr:first');
.show-on-top{ color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tbody>
<tr>
<th>City</th>
</tr>
<tr>
<td>Madrid</td>
</tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tbody>
</table>
I can't figure out how to create the below table in HTML. It's very basic, I know, but I'm stuck at the header.
The year needs to span over all the months. I can't seem to figure out how to do this.
Add colspan="12" to the year cell and rowspan="2" to the Task name cell
Demo
<table>
<tr>
<td rowspan="2">Task name</td>
<td colspan="12">Year</td>
</tr>
<tr>
<td>Task name</td>
<td>January</td>
<td>February</td>
<td>...</td>
<td>December</td>
</tr>
<tr>
<td>Task name</td>
<td colspan="12">Rest of cells...</td>
</tr>
</table>
How can I create a table like the above example in HTML and CSS.
I've tried the following:
<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td style="width:100%">TEXT</td>
</tr>
but it won't work. Can anyone help?
You should use colspan for your second row. Like this :
<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td colspan="2" style="width:100%">TEXT</td>
</tr>
...
</table>
For learn -> HTML Colspan
<td>s have a colspan attribute that determine how many columns it should span over. You example has 2 columns to span, so your cleaned up code would look like this:
<table>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<!-- The important part is here -->
<td colspan="2">This will have 100% width by default</td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td colspan="2">Cell 3 (Two columns)</td>
</tr>
</table>
colspan will help you. Link to more info.
I would like to make this table layout:
I have:
<table border="1">
<tr> <td colspan="3">aaa</td> <td colspan="3">aa</td> </tr>
<tr> <td>a</td> <td> aa </td> <td> aaa </td> <td>aa</td><td>aa</td><td>aa</td> </tr>
</table>
but how can I make rest?
LIVE: http://jsfiddle.net/jsTvA/1/
Here it is:
Code: http://jsfiddle.net/jsTvA/14/
You could create a new table in a cell.
The way to approach the problem if you want a single table is:
Work out the maximum number of rows and columns you require. In your case it looks like 8 columns, 6 rows.
Make a simple table grid of this size.
Start setting colspan and rowspan on tds and removing the tds next to them.
Repeat this until you have the format you like.
The best i can:
<table border="1">
<tr>
<td colspan="3">aaa</td>
<td colspan="3">aa</td>
</tr>
<tr>
<td>a</td>
<td> aa </td>
<td> aaa </td>
<td>lol</td>
<td>
<table border="1">
<tr>
<td colspan="3">
lol
</td>
</tr>
<tr>
<td>
ok
</td>
<td>
ok
</td>
<td>
ok
</td>
</tr>
<tr>
<td>
ok
</td>
<td>
ok
</td>
<td>
ok
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="10">
</td>
</tr>
</table>
http://jsfiddle.net/jsTvA/15/
<table border="1">
<tr>
<td colspan="3">aaa</td>
<td colspan="5">aa</td>
</tr>
<tr>
<td rowspan="3">a</td>
<td rowspan="3">aa</td>
<td rowspan="3">aa</td>
<td rowspan="3">aa</td>
<td colspan="3">aa</td>
<td rowspan="3">aa</td>
</tr>
<tr>
<td>bb</td>
<td>bb</td>
<td>bb</td>
</tr>
<tr>
<td>bb</td>
<td>bb</td>
<td>bb</td>
</tr>
<tr>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
</tr>
<tr>
<td colspan="8">aa</td>
</tr>
</table>
To make that structure you'll need to utilise the attribute colspan and rowspan.
Example.
To Make the following structure:
-------
|A |
-------
|X|Y|Z|
-----
| |1|2|
-------
use the code:
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td rowspan="2">X</td>
<td>Y</td>
<td>Z</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
An alternative is as a previous post suggested, to add a nested table as follows:
<tr>
<td>A</td>
</tr>
<tr>
<table>
<tr>
<td>X</td>
<td>Y</td>
<td>|</td>
</tr>
</table>
</tr>
Personally I'd opt for the colspan route, but its really up to you.
Another route would be to ignore tables entirely and use CSS, but you are likely to find this much more painful unless you are already competenent at using CSS.
You can try merging cells in excel and then convert it into html.
http://tableizer.journalistopia.com
How can I make a table which has sub/nested tables scrollable if given a max height? I do not want the thead to scroll with it. What I'm really looking for is some valid tag that I can wrap my s in, or some other markup that will work just as well as the this:
<table>
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<!-- Insert valid tag here to wrap <tbody>s -->
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
</tr>
<tr class="sub-table">
<td colspan="2">
<table>
<thead>
<tr>
<th>Sub Column1</th>
<th>Sub Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub Val1</td>
<td>Sub Val2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
</tr>
<tr class="sub-table">
<td colspan="2">
<table>
<thead>
<tr>
<th>Sub Column1</th>
<th>Sub Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub Val1</td>
<td>Sub Val2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<!-- Insert valid close tag here -->
</table>
If I understand your question correctly, maybe try something like this: http://jsfiddle.net/pPuXL/1/
You need to display the TBODY elements as "block" or "inline-block" in order for overflow to work on it, as in the CSS example I posted.