Table column width stretched - html

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

Related

Different widths being specified on each row of a table

Anyone know why each width:xx% on the table cells are not being used?
Looks like the first row may be set correctly, but the sizes in the second row are being ignored.
http://jsfiddle.net/bobbyrne01/4fLL8md0/1/
<table>
<tr>
<td style="width:80%;">A lot of text on 1 line</td>
<td style="width:20%">Text</td>
</tr>
<tr>
<td style="width:20%">
<label>Directory:</label>
</td>
<td style="width:80%">
<input id="directory" readonly="true" />
</td>
</tr>
</table>
It's not possible any simply way. You can achive that only using more than 2 cells in row and group them.
<table border="1" width="100%">
<col width="20%">
<col width="60%">
<col width="20%">
<tr>
<td colspan="2">A lot of text on 1 line</td>
<td>Text</td>
</tr>
<tr>
<td>
<label>Directory:</label>
</td>
<td colspan="2">
<input id="directory" readonly="true" />
</td>
</tr>
</table>
http://jsfiddle.net/4fLL8md0/2/
As you can see, for this case you need 3 cells with width 20%, 60% and 20%. If you have more rows, more cells or want to divide rows in other percentages, you always need to change the table structure.
Table cells must conform – otherwise it wouldn't be a table! You can use colspan to sorta overcome this limitation.
The way you are trying to achieve the design is totally wrong. There are two ways to do this either use colspan or nested table to achieve this.
You can try the answer given by Panter or try nested table that is the best option as it will be easier to implement and maintain also.

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.

outlook 2013 in-browser inbox is adding style attribute to my table and destroying the alignment

EDIT: I have added a fiddle to better demonstrate what is happening since the person who has taken the time to offer an answer (thanks!) does not seem to get what I was asking, so hopefully this helps to clarify
http://jsfiddle.net/t5sPL/
I am sending an HTML email. It renders fine in gmail, outlook desktop client, and several other email clients. however, when viewing an inbox online in the outlook webmail app, http://portal.microsoftonline.com, Microsoft seems to be doing its best to not let me center the contents of a table. Tipped off by this article
https://litmus.com/blog/hotmail-and-outlook-com-drop-support-for-margin
I see that the margin attribute is no longer supported. I tried using padding instead and no luck. So, to center my table, I thought I could go oldschool and use this pattern to center it:
<table width='100%' style='width:100%'>
<tbody>
<tr>
<td align='center'>
<table width='700' style='width:700px'>
<tbody>
<tr>
<td>Content to be centered</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
however, this still does not work, because in my <td align='center'> tag, outlook is inexplicably attaching a style='text-align:center;' attribute, for a result of
<td align='center' style='text-align:center;'>
which effectively justifies the content to the left. When I use "inspect element" and delete the style attribute, everything looks as expected.
Has anyone dealt with this issue before? Any resolution, or explanation? Thanks!
Are you trying to center the content inside the 700 wide table? If so, add align="center" to the table cell it is in:
<table width='700' style='width:700px'>
<tbody>
<tr>
<td align="center">Content to be centered</td>
</tr>
</tbody>
</table>
If you are trying to left align the 700 table content, but have the 700 table itself centered, just add align="left" to the <td> instead.
UPDATE:
Based on your jsFiddle - This should fix it:
<table width='100%' style='width:100%' border=1>
<tbody>
<tr>
<td align='center' style='text-align:center'>
<table align='center' width='700' style='width:700px' border=1>
<tbody>
<tr>
<td align='left'><b style='color:red'>This content used to be aligned incorrectly...</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>

HTML pyramid-like tables

Yesterday a friend has shown me a weird problem he has encountered in his classes. He could not make a pyramid-like table(as shown in my jsfiddle link below).
I've never really dealt with html tables much, but I thought this was just about the program they were using being stupid. But when I tried writing html for it myself, I saw it was more than that...
This is what I was trying:
http://jsfiddle.net/5aDkL/
<table border="1">
<tr>
<td colspan="1">A</td>
<td colspan="1">B</td>
<td colspan="2">C</td>
<td colspan="1">D</td>
<td colspan="1">E</td>
</tr>
<tr>
<td colspan="1">F</td>
<td colspan="2">G</td>
<td colspan="2">H</td>
<td colspan="1">I</td>
</tr>
<tr>
<td colspan="2">J</td>
<td colspan="2">K</td>
<td colspan="2">L</td>
</tr>
</table>
As you can see, the table doesn't look anything like you would expect(unless you know about this already).
So after some web searching, I came up with the following, which works fine(with a single line of css):
http://jsfiddle.net/SzWHX/
<table border="1">
<col>
<col>
<col>
<col>
<col>
<col>
<tr>
<td colspan="1">A</td>
<td colspan="1">B</td>
<td colspan="2">C</td>
<td colspan="1">D</td>
<td colspan="1">E</td>
</tr>
<tr>
<td colspan="1">F</td>
<td colspan="2">G</td>
<td colspan="2">H</td>
<td colspan="1">I</td>
</tr>
<tr>
<td colspan="2">J</td>
<td colspan="2">K</td>
<td colspan="2">L</td>
</tr>
</table>
But I was wondering, is there a better way to code this?
I mean, those empty col elements just look silly there, right?
So if anyone can enlighten me, that would be much appreciated.
That "pyramid" looks really ugly:
Especially obvious when you look at the table without borders:
Wouldn't a better compromise be to add the necessary empty ( ) cells so that the spacing is correct? I set all the columns to a width of 20px, you can do this with css without use of col in the below example if desired.
One last comparison:
There is no simpler way at present. This is a good example of a case where the col element is really needed (for the intended styling). The reason is that otherwise there is no way to refer to the 3rd and 4th column in CSS, since no table cell occupies only one slot in such a column.
In theory, the :nth-column() pseudo-class would let us do the styling without the col elements, but it’s really work in progress, being planned (CSS Selectors Level 4).

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!