• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 337
  • Last Modified:

Changed HTML doctype version and tables don't look right

I was using 4.0 doctype and changes to 4.01 doctype and now my HTML tables don't look the same.
Old doctype:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
New doctype:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

In this implementation, I prefer the tables to look like the old-style HTML table look and feel.  How do I get this back?
0
Tim Titus
Asked:
Tim Titus
  • 5
  • 5
  • 3
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
You could go back to the old DOCTYPE.  But you have discovered that 'newer' or different DOCTYPES actually do have an effect on the display of a page.  XHTML or HTML5 would probably change it even more.

To make it look like it used to with the new DOCTYPE, you have to figure which elements are being rendered different and then find out how to style them to look like you want.  Because the details are in how you did things, I can't give you a simple how-to.
0
 
Tim TitusCTOAuthor Commented:
I can't go back to the old DOCTYPE, as there are some features that I need that are only supported with the new DOCTYPE.

I'm still interested in having a table show up with the old classic-style shadowing.  Is it possible to define CSS that will make a table look this way?
0
 
Dave BaldwinFixer of ProblemsCommented:
Can you show me a screen shot of both ways?  The code for the page or at least enough to demonstrate the effect would be very helpful.  And what browser are you using?  That can make a difference also.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Tim TitusCTOAuthor Commented:
I have attached 2 files, one with each doctype.  If you open both in IE, you will see the difference.
Test.htm
Test2.htm
0
 
Dave BaldwinFixer of ProblemsCommented:
In order to judge, you must have a complete and correct page in the first place.  I have modified your two files as shown below.  The only difference I saw between them in any version was that the default margin on the <body> was different.  The tables weren't different at all.  I'm using IE8.  For what it's worth, there is no difference in Firefox.

'test.htm'
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>Title goes here</TITLE>
</HEAD>
<BODY>

<table border="1" cellpadding="1" cellspacing="0" summary="">
  <TR>
    <TD>Name</TD>
    <TD>Phone</TD>
  </TR>
  <TR>
    <TD>Tim</TD>
    <TD>x4222</TD>
  </TR>
  <TR>
    <TD>Bob</TD>
    <TD>x4261</TD>
  </TR>
</TABLE>

</BODY>
</HTML>

Open in new window


'test2.htm'
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
  <TITLE>Title goes here</TITLE>
</HEAD>
<BODY>

<table border="1" cellpadding="1" cellspacing="0" summary="">
  <TR>
    <TD>Name</TD>
    <TD>Phone</TD>
  </TR>
  <TR>
    <TD>Tim</TD>
    <TD>x4222</TD>
  </TR>
  <TR>
    <TD>Bob</TD>
    <TD>x4261</TD>
  </TR>
</TABLE>

</BODY>
</HTML>

Open in new window

0
 
COBOLdinosaurCommented:
Now that you see how the doctype can affect rendering, youmight want to move up to something from this century, because sooner or later you are going to want HTML5 features, and the difference is huge.  Best to do it as you go along instead of being forced to deal with it under time pressures.

Cd&
0
 
Tim TitusCTOAuthor Commented:
Fine, but does anyone know how to code CSS to make a table look like it used to with shadows for each cell as well as the entire table?
0
 
COBOLdinosaurCommented:
Perhaps a paleontologist will come along.  It has been a long time since I worked with such relics. If you post a link to the actual page with the problem, then it become slightly easier to see what can be done, but a weakness of the old formats is serious cross-browser issues.

Cd&
0
 
Dave BaldwinFixer of ProblemsCommented:
The code snippets you posted showed default borders but not 'shadows' so I'm not sure what you're talking about.
0
 
Tim TitusCTOAuthor Commented:
Here's a sample screenshot of what a basic table used to look like -- shadows for each cell and the entire table.  I hate to be viewed as a luddite, but they looked really nice in the old days.
OldTable.bmp
0
 
Dave BaldwinFixer of ProblemsCommented:
Try this:  You can play with the attributes in the <table> tag to get different looks.  In HTML5, you are expected to do these things in CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
  <TITLE>Title goes here</TITLE>
</HEAD>
<BODY>

<table border="2" cellpadding="1" cellspacing="2" summary="">
  <TR>
    <TD>Name</TD>
    <TD>Phone</TD>
  </TR>
  <TR>
    <TD>Tim</TD>
    <TD>x4222</TD>
  </TR>
  <TR>
    <TD>Bob</TD>
    <TD>x4261</TD>
  </TR>
</TABLE>

</BODY>
</HTML>

Open in new window

0
 
COBOLdinosaurCommented:
Oh that looks like inset and outset

In the css try:

table {border: 2px outset silver;}
td, th (border:1pc inset silver;}

I don't think of you as a luddite.  I refuse to support mobile specifically; don't own an ipad or iphone and prefer 30+ year old cars.

However I am aware that moving forward always means leaving some things behind.

Cd&
0
 
Tim TitusCTOAuthor Commented:
This is perfect!  Thanks!  My apologies for misleading everyone by talking about shadows when the problem I was having was with the borders!  I'm happy now!
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

  • 5
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now