?
Solved

Changed HTML doctype version and tables don't look right

Posted on 2013-01-25
13
Medium Priority
?
329 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
  • 3
13 Comments
 
LVL 84

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 84

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
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

 

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 84

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
 

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 84

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 84

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 2000 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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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 …

762 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