1 reply [Last post]
dcaverman
dcaverman's picture
Offline
newbie
Last seen: 7 years 23 weeks ago
Timezone: GMT-5
Joined: 2014-05-28
Posts: 7
Points: 11

I come from old school HTML where we used tables to lay out a page. I resisted using CSS for a long time because I never took the time to learn and never really found anything to explain it well. That was until I ran across the Head First series of books which just seem to be able to explain things to me in a way that I understand.

Anyway, the Head First take on using tables is that you can still use them for laying out tabular data but use CSS to style them with things like padding and borders.

I've been practicing CSS by going back and redoing old sites I did long ago and there has been one or two times where table just seemed to work best (Example: Username/Password box where you would align the textboxes up each other and their labels). However, when I showed a friend of mine who is occasionally helping he completely frowned upon the use of table. He is basically telling me to never use a table.

So, are tables completely dead? Should I never use them anymore? It seems like I could probably get stuff done using

with floats but it takes me 10x longer (grant it that's partly because I'm learning).

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Yes and no

Use tables absolutely for containing positionally related data, that is records (rows) and fields (cells). But not for anything else. That's just basic html, which describes the structure of the document. Always mark up your content without regard for its appearance. Get that right and the presentation layer becomes much simpler to build.

Following is a basic login form in three presentations. Note the html is the same on all.

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test page</title>
  <style type="text/css">
/*<![CDATA[*/
 
  body {
    font: normal 100%/1.25% arial, sans-serif;
    margin: 0;
    padding: 0;
    }
 
  form {
    border: 1px dotted gray;
    margin: 1.25em;
    padding: 0 1.25em;
    }
 
  #v1 p {
    display: inline-block;
    }
 
  #v1 label,
  #v1 input {
    display: block;
    line-height: 1.25em;
    }
 
  #v1 p:last-child {
    display: block;
    }
 
#v2 {
    display: table;
    }
 
#v2 p {
    display: table-row;
    }
 
#v2 label,
#v2 input {
    display: table-cell;
    width: 50%;
    }
 
#v2 label {
    text-align: right;
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <form action="#"
        method="get">
    <p><label for="name">Username:</label> <input id="name"
           name="name"
           type="text"></p>
 
    <p><label for="pass">Password: <input id="pass"
           name="pass"
           type="password"></label></p>
 
    <p><input type="submit"></p>
  </form>
 
  <form action="#"
        id="v1"
        method="get">
    <p><label for="name1">Username:</label> <input id="name1"
           name="name1"
           type="text"></p>
 
    <p><label for="pass1">Password: <input id="pass1"
           name="pass1"
           type="password"></label></p>
 
    <p><input type="submit"
           value="Enter"></p>
  </form>
 
  <form action="#"
        id="v2"
        method="get">
    <p><label for="name2">Username:</label> <input id="name2"
           name="name2"
           type="text"></p>
 
    <p><label for="pass2">Password: </label><input id="pass2"
           name="pass2"
           type="password"></p>
 
    <p><input type="submit"
           value="Let me in"></p>
  </form>
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.