Line up the columns of nested table to parent - html

So I have a table like so,
<table>
<tbody>
<tr>
<td colspan="6">My 6 headers</td>
</tr>
<tr>
<td colspan="6">My 6 inputs</td>
</tr>
<tr>
<td colspan="3">Indent 3 columns</td>
<td colspan="3">
<table>
<tbody>
<tr>
<td>repeating column 1</td>
<td>repeating column 2</td>
<td>repeating column 3</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
My issue is that, <td>repeating column 1</td> lines up with <td>My 4th input</td> column, but <td>repeating column 2</td> starts immediately after <td>repeating column 1</td> isntead of lining up with <td>My 5th input</td>. How can I align them?
jsFiddle: http://jsfiddle.net/pL89ykLp/

It isn't possible with nested tables unless you set the width to something fixed, and make pixel perfect corrections. This approach is highly unmaintainable.
Instead, don't use tables for layout, and use some proper semantic markup. What kind of semantic markup? That's hard to know without knowing the context of your application.

There's no need for the a nested table in the last tag. Change the second row to this:
<tr>
<td colspan="3">Indent 3 columns</td>
<td>column 1</td>
<td>repeating column 2 </td>
<td>repeating column 3</td>
</tr>
Fiddle:
http://jsfiddle.net/9ywaqf1L/

Related

How to make a table responsive for mobile devices and place some columns bellow the others

My name is David, I am a beginner and I have some difficulties finding a solution to my problem:
I have a page with a table, on a WordPress site. The table is too big for small devices, such as mobile phones, and I would like to go from 4 columns to 2 columns for these devices. What I would like the browser to do is to "cut" the last two columns and place them just below of the first two, because the first and the third column and the second and the forth columns contain the same information.
This would be a simplifier version of the html code:
<table>
<tbody>
<tr>
<th>Artículo</th>
<th>Descripción</th>
<th>Artículo</th>
<th>Descripción</th>
</tr>
<tr>
<td>Image 1</td>
<td>International Edition ...</td>
<td>Image 2</td>
<td>Green Box</td>
</tr>
<tr>
<td>Image 3</td>
<td>Blue Box ...</td>
<td>Image 4</td>
<td>Red Box ...</td>
</tr>
<tr>
<td>Image 5</td>
<td>Absurd Box ...</td>
<td>Image 6</td>
<td>The Bigger, Blacker Box ...</td>
</tr>
</tbody>
I have thought that it may be possible to tackle this with CSS, but all the information I have found on the internet does not match exactly this problem.
Do you know how this could be done?
Thank you very much!!!!

Split an html row into multiple (sub) rows

How can I split a row in a html table into multiple (sub) rows? (I don't mean to use rowspan to span multiple rows because I am using a rails gem called sync that is constrained to updating a single table row at a time).
For example, how can I create a single row in a table, that:
in column one, has a single row
in column two, is split into 2 sub rows
in column three, is split into 4 sub rows (row one from the previous column is split into 2 sub rows, and row 2 from the previous column is split into 2 sub rows).
This is just an example. I need to be able to dynamically decide the way the rows will be split at run time.
Edit: see below for structure as described in bullet points above (although note i'm trying to achieve this structure within a single table row, i.e. without using rowspan)
<table>
<tr>
<td rowspan=4>1</td>
<td rowspan=2>2</td>
<td >3</td>
</tr>
<tr>
<td >4</td>
</tr>
<tr>
<td rowspan=2>2</td>
<td >5</td>
</tr>
<tr>
<td >6</td>
</tr>
http://jsfiddle.net/40ukzvz1/
You could try nesting tables so that each table structure is not affected by the cell it sits in.
See code example:
<table width="100%" border bgcolor="red">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>
<table width="100%" border bgcolor="green">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
</table>
</td>
<td>
<table width="100%" border bgcolor="blue">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
</td>
<td>
<table width="100%" border bgcolor="yellow">
<tr>
<td>1</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>

Inserting a blank table row with a smaller height

I have a table consisting of a header row and a couple of data rows. What I want to do is to create a blank row in between the header and the data rows, but I want this blank row to be smaller in height than the other rows (so that there isn't such a large gap).
How can I accomplish this?
My HTML mark-up code for the table is as follows:
<table class="action_table">
<tbody>
<tr class="header_row">
<td>Header Item</td>
<td>Header Item 2</td>
<td>Header Item 3</td>
</tr>
<tr class="blank_row">
<td bgcolor="#FFFFFF" colspan="3"> </td>
</tr>
<tr class="data_row">
<td>Data Item</td>
<td>Data Item 2</td>
<td>Data Item 3</td>
</tr>
</tbody>
</table>
Just add the CSS rule (and the slightly improved mark-up) posted below and you should get the result that you're after.
CSS
.blank_row
{
height: 10px !important; /* overwrites any other rules */
background-color: #FFFFFF;
}
HTML
<tr class="blank_row">
<td colspan="3"></td>
</tr>
Since I have no idea what your current stylesheet looks like I added the !important property just in case. If possible, though, you should remove it as one rarely wants to rely on !important declarations in a stylesheet considering the big possibility that they will mess it up later on.
Try this:
<td bgcolor="#FFFFFF" style="line-height:10px;" colspan=3> </td>
You don't need an extra table row to create space inside a table. See this jsFiddle.
(I made the gap light grey in colour, so you can see it, but you can change that to transparent.)
Using a table row just for display purposes is table abuse!
I know this question already has an answer, but I found out an even simpler way of doing this.
Just add
<tr height = 20px></tr>
Into the table where you want to have an empty row. It works fine in my program and it's probably the quickest solution possible.
This one works for me:
<tr style="height: 15px;"/>
I wanted to achieve the same as asked in this question but accepted answer did not work for me in May, 2018 (maybe answer is too old or some other reason). I am using bootsrap 3.3.7 and ionic v1.
You need to set line-height to do set height of specific row.
.blank_row {
line-height: 3px;
}
<table class="action_table">
<tbody>
<tr class="header_row">
<td>Header Item</td>
<td>Header Item 2</td>
<td>Header Item 3</td>
</tr>
<tr class="blank_row">
<td bgcolor="#000" colspan="3"> </td>
</tr>
<tr class="data_row">
<td>Data Item</td>
<td>Data Item 2</td>
<td>Data Item 3</td>
</tr>
</tbody>
</table>
I couldn't get anything to work until I tried this simple line:
<p style="margin-top:0; margin-bottom:0; line-height:.5"><br /></p>
which allows you to vary a filler line height to your hearts content
(I was [probably MISusing Table to get three columns (boxes) of text which I then wanted to line up along the bottom)
I'm an amateur so would appreciate comments

Two columns in a table

I'm trying to figure out how it is possible to construct a table with two columns (left and right) so that when left column' content ends the right column takes over it (see example).
I'm sure there's a way to do it without floats but correct me if I'm wrong.
Use colspan like this:
<table>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td colspan="2">ab3</td>
</tr>
<tr>
<td colspan="2">ab4</td>
</tr>
</table>

HTML Table issue

I have a HTML table issue that I'd like to understand better.
Let's assume that I have a 3 row HTML
<table>
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<td colspan="2">A very loooooooong string here</td>
</tr>
</table>
With a very long text, the contents in the first 2 rows appear like they are nearly centered. However, if I move the whole "A very long string" <td> into a separate <table> inside the row, I see that the other content doesn't center. Why is the display different when the <td> content is inside another table?
If your question ends up with 2 tables, with the original like this:
<table>
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
</table>
And the looooong text into its own:
<table>
<tr>
<td colspan="2">A very loooooooong string here</td>
</tr>
</table>
Then the reason why the first two lines of the first table no longer look like they're centred is because they're not - ONLY if you're comparing relative to the second table.
If you debug with border="1" in your TABLE attributes, you will see that the table that they are contained in collapses to the widest possible table data cell. Because of this, they don't look like they're centred, even though they still are.
Add some arbitrary width to the first table and you will see that they are still centred.
Can you please provide your second example? When I created the following, it still looked the same. There's a chance you didn't properly embed the table within a table cell with a colspan of 2.
<table border="1">
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<td colspan="2">
<table border="1"><tr>
<td>A very loooooooong string here</td>
</tr></table>
</td>
</tr>
</table>
When explaining an issue with HTML, it is best to indicate which browsers were used to test...
Anyway, I did a quick test with FF3 and IE6, and I don't see the behavior you describe: with nested table, the long string has slightly more padding but the other content is still visually centered.
You should show your other code. Mine is:
<table>
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<td colspan="2"><table><tr><td>A very loooooooong string here</td></tr></table></td>
</tr>
</table>
I think I know what you mean, is the second part of your question based on:
<table>
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<table><td colspan="2">A very loooooooong string here</td></table>
</tr>
</table>
then I guess the reason the table contents are rendered left-aligned is that the inner table tags are hiding the colspan from the outer table.
The answer is to stop using html to style your table and to use CSS instead!