Solved

Changed HTML doctype version and tables don't look right

Posted on 2013-01-25
13
321 Views
Last Modified: 2013-01-25
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
Comment
Question by:ttitus
  • 5
  • 5
  • 3
13 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 38819747
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
 

Author Comment

by:ttitus
ID: 38819865
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 38819942
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
 

Author Comment

by:ttitus
ID: 38820043
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 38820261
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38820840
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:ttitus
ID: 38820851
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38820946
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 38820955
The code snippets you posted showed default borders but not 'shadows' so I'm not sure what you're talking about.
0
 

Author Comment

by:ttitus
ID: 38820958
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 38820970
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 38820999
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
 

Author Closing Comment

by:ttitus
ID: 38821001
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now