align="center" versus CSS text-align:center for <div>
We've been updating our site to replace the deprecated HTML tags with CSS. Only issue I've found so far involves centering tables on the page.
Have a "table of tables" that contains 1 row and 2 columns. Each column contains a table. We want the main table to be centered left to right on the page while still allowing for varying widths as the two inner tables expand or contract horizontally with data changes.
To do this, we've placed the main table in a division. While the deprecated <div align="center"> properly centers the main table on the page, using <div style="text-align:center">
Reviewed several of the articles on EE, but none were an exact match and the solutions did not fix the issue. (Maybe I just didn't go deep enough into the list.)
Have also tried:
<div style="text-align:center">
<div style="width:99%; text-align:center">
<div style="width:99%; margin-left:auto; margin-right:auto">
<div style="width:99%; margin-left:auto; margin-right:auto; text-align:center">
<div style="margin-left:auto; margin-right:auto">
<div style="margin-left:auto; margin-right:auto; text-align:center">
as well all sorts of combinations of float and text-align on both the main and inner tables.
None of these work, but the simple <div align="center"> does work.
What is the proper way to remove the deprecated tag and get the main table to center on the page?
Thanks!
Current abbreviated code (this works):
<div align="center">
<table id="ccTable" style="margin-top:20px">
<tr>
<td style="vertical-align:top"
<table>
...
</table>
</td>
<td style="vertical-align:top"
<table>
...
</table>
</td>
</tr>
</table>
</div>
Have a "table of tables" that contains 1 row and 2 columns. Each column contains a table. We want the main table to be centered left to right on the page while still allowing for varying widths as the two inner tables expand or contract horizontally with data changes.
To do this, we've placed the main table in a division. While the deprecated <div align="center"> properly centers the main table on the page, using <div style="text-align:center">
Reviewed several of the articles on EE, but none were an exact match and the solutions did not fix the issue. (Maybe I just didn't go deep enough into the list.)
Have also tried:
<div style="text-align:center">
<div style="width:99%; text-align:center">
<div style="width:99%; margin-left:auto; margin-right:auto">
<div style="width:99%; margin-left:auto; margin-right:auto; text-align:center">
<div style="margin-left:auto; margin-right:auto">
<div style="margin-left:auto; margin-right:auto; text-align:center">
as well all sorts of combinations of float and text-align on both the main and inner tables.
None of these work, but the simple <div align="center"> does work.
What is the proper way to remove the deprecated tag and get the main table to center on the page?
Thanks!
Current abbreviated code (this works):
<div align="center">
<table id="ccTable" style="margin-top:20px">
<tr>
<td style="vertical-align:top"
<table>
...
</table>
</td>
<td style="vertical-align:top"
<table>
...
</table>
</td>
</tr>
</table>
</div>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Okay, let's see what we are doing differently. I'm testing in Firefox and Chrome, latest versions.
Here's a fiddle to play with. Be sure you have the result window wide enough to see the left and right margins.
http://jsfiddle.net/rbp9m19z/
Here's a fiddle to play with. Be sure you have the result window wide enough to see the left and right margins.
http://jsfiddle.net/rbp9m19z/
It would make thing easier if you posted a link to the page. I suspect the problem is related to the fact you are using nested table (a 20th century technique) such structures are difficult to manage without the obsolete attributes which is why they are generally not used in modern design and development.
Cd&
Cd&
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
>>> Probably about the same age as the COBOL code I wrote in the 80...
Actually I started with assembler 50 years ago (yes they had computers in the 60s). If you did COBOL in the 80s then you were late to the party using either COBOL80 or COBOL74. I was doing it with COBOL68, and its root (pre-standardized by Grace Hopper) autocoder.
Using tables for layout management in the 21st century is like using COBOL74 in a modern environment. The learning curve to do full separation of content and presentation with CSS is quite small and my experience has been that after a couple of weeks the productivity starts to increase to a peak of about 30%. I can still do assembler; and I like assembler, but modern tools combined with an understanding of what is happening at the primitive level keeps me ahead of the kids who are a third my age.
Since I retired I only put in 15-20 hours a week but I put out more work then the kids putting in a full week; but I'm the boss so I get to pick what I want to work on.
Cd&
Actually I started with assembler 50 years ago (yes they had computers in the 60s). If you did COBOL in the 80s then you were late to the party using either COBOL80 or COBOL74. I was doing it with COBOL68, and its root (pre-standardized by Grace Hopper) autocoder.
Using tables for layout management in the 21st century is like using COBOL74 in a modern environment. The learning curve to do full separation of content and presentation with CSS is quite small and my experience has been that after a couple of weeks the productivity starts to increase to a peak of about 30%. I can still do assembler; and I like assembler, but modern tools combined with an understanding of what is happening at the primitive level keeps me ahead of the kids who are a third my age.
Since I retired I only put in 15-20 hours a week but I put out more work then the kids putting in a full week; but I'm the boss so I get to pick what I want to work on.
Cd&
ASKER
Dino,
Looks like you've got me by a few years. Started in 1980 with COBOL74 on a IBM 360-138. No disks - tape IPL. Also wrote in BAL for that box. (Does anybody still use EBCDIC?) More horsepower in my phone now, by a long shot, than in that box.
Will dedicate some time to learning the CSS tables. Any suggested reading?
Thanks for the input, by the way.
Bruce
Looks like you've got me by a few years. Started in 1980 with COBOL74 on a IBM 360-138. No disks - tape IPL. Also wrote in BAL for that box. (Does anybody still use EBCDIC?) More horsepower in my phone now, by a long shot, than in that box.
Will dedicate some time to learning the CSS tables. Any suggested reading?
Thanks for the input, by the way.
Bruce
ASKER
Did further research elsewhere, tested and it works.
from the sound of it you have enough understanding of basic concepts that you don't need the kindergarten level tutorials
If you explore the MDN CSS area you will probably be surprised how much you learn with not much effort.
Cd&
If you explore the MDN CSS area you will probably be surprised how much you learn with not much effort.
Cd&
ASKER
Bruce