HTML Table issue - html

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!

Related

Can you make 2 cell 1 on the other within one tr tag?

What I want is something like this:
<table>
<tr>
<td>a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
</tr>
</table>
which creates a table like this:
but what I want is something like this:
I know I can easily make it with adding a new row and using rowspan to fix it, but if there is another way to do it without adding another row, it will be so great
You can implement that using rowspan.
<table border="1">
<tr>
<td rowspan="2">a1</td>
<td>a2</td>
<td rowspan="2">a4</td>
</tr>
<tr>
<td>a3</td>
</tr>
</table>
the answer I got after so many searches was this 2 without adding another Row:
adding both a2 a3 to another cell.
using grid system instead of table.
and there are other ways and the easiest ways is by adding another row, the code looks like this:
<table>
<tr>
<td rowspan="2">a1</td>
<td>a2</td>
<td rowspan="2">a4</td>
</tr>
<tr>
<td>a3</td>
</tr>
</table>

HTML validation error: table row has no cells beginning in it

<table border="1">
<tr>
<td rowspan="4">A</td>
<td colspan="5">B</td>
</tr>
<tr>
<td colspan="3">E</td>
<td rowspan="2">F</td>
<td rowspan="4">C</td>
</tr>
<tr>
<td rowspan="2">G</td>
<td>
<table border="1">
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>
</td>
<td>
<table border="1">
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">H</td>
</tr>
<tr>
<td colspan="5">D</td>
</tr>
</table>
W3C Validator complains, that: "Table column 6 established by element td has no cells beginning in it." even though cell 'C' should begin on 6th column. It displays correctly, so could it be a bug in the validator?
This appears to be a bug in the validator. It somehow fails to analyze the table properly.
Proving this might require a detailed analysis based on the HTML5 table model, but if you just add <col><col><col><col><col><col> right after the <table ...> tag, the markup passes validation – perhaps because it tells the browser that there are six columns and this helps the validator to recognize the status of the C cell properly. I accidentally noticed this when I added the col elements in order to set background colors on columns to visualize the situation better.
Consider posting a bug report and reporting back here if there will be progress there.

Table column width stretched

Can someone explain to me why my table isn't laying out the way I would expect?
The column displaying the phone numbers should be as wide as possible, but the cell with the email address is making the column with the number labels wider?
http://jsfiddle.net/NinjaArmadillo/UX3pH/
<table width='100%' border="1">
<tr>
<td rowspan='5'>PIC</td>
<td colspan='2'>First Lastname</td>
</tr>
<tr>
<td colspan='2'>Users Position</td>
</tr>
<tr>
<td colspan='2'>emailaddress.emailaddress#emailaddress.com</td>
</tr>
<tr>
<td><span>business:</span></td>
<td width='100%'><span>123-4567</span></td>
</tr>
<tr>
<td><span>mobile:</span></td>
<td width='100%'><span>765-4321</span></td>
</tr>
</table>
P.S. Please no "You should use DIVs!", I know, this is a small part of a much larger layout and I couldn't get everything to work with DIVs and I'm running out of time, v2.0 will be refactored to use DIVs (If I can get time to make them work)
This will help you td{width:5%}
Demo

Skip <td> in HTML table

Say I have the following table:
<table>
<tr>
<td>Example</td>
</td>One</td>
</tr>
<tr>
<td>Example</td>
</td>Two</td>
</tr>
<tr>
<td>Example</td>
</td>Three</td>
</tr>
<tr>
<!--
Here I want to skip the first <td> cell; use only second. Example:
<td>(empty, possibly )</td>
<td>blah blah blah</td>
-->
</tr>
</table>
If you read my comment in the last row, you can see that in the last row I want to display something in the second column of the table, with the first remaining empty. How would I go about doing this?
As a side note, I read the question/answers in this SO question but colspan is different from what I want. I'm also not familiar with css empty-cell so if that is a solution, please provide a bit of sample code.
HTML
<tr>
<td></td>
<td>content here</td>
</tr>
CSS
table { empty-cells: show;}
Leave the <td> empty, no reason to put a space in there. can act a bit funny at times, especially in tables.
I can't see any reason not to do exactly what you are proposing: Use an empty cell containing only a ("No Break Space") in it:
<tr>
<td> </td>
<td>Whatever</td>
</tr>
CSS code:
table { empty-cells: show; }
Or, alternatively, you can insert in the <td>.

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>