Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    100
    Thanks
    1
    Thanked 0 Times in 0 Posts

    converting HTML tables to CSS

    I have a table that is written in HTML and I would like to convert it to CSS so that my XHTML page validates.

    PHP Code:
    <center>
    <table border="0" width="80%" cellspacing="0" cellpadding="4">
    <tr>
    <td>
    <table border="1" width="100%" cellspacing="0" cellpadding="8">
    <tr>
    <td>
    <table border="0" width="100%">
    <tr>
    <td colspan="3" align="center">
    <small>
    <font size="4"><u>TV Schedule</u></font></small>
    </td>
    </tr>
    <tr>
    <td colspan="3" align="center">
    <small>
    <b><u>TV Tokyo</u></b></small>
    </td>
    <?php
    // Make a MySQL Connection
    mysql_connect("localhost""user""pass") or die(mysql_error());
    mysql_query("SET NAMES 'UTF8'");
    mysql_select_db("database") or die(mysql_error());

    // Get all the data from the "example" table
    $result mysql_query("SELECT * FROM TVTokyo ORDER BY id")
    or die(
    mysql_error());

    while(
    $row mysql_fetch_array$result )) {
        echo 
    "<tr>
              <td width=\"33%\"><small>{$row['Date']}</small></td>
              <td width=\"28%\"><small>{$row['Time']}</small></td>
              <td width=\"38%\"><small>{$row['Title']}</small></td>
              </tr>"
    ;
        
    }
    ?>
    <tr>
    <td colspan="3" align="center">
    <small>
    <b><u>Cartoon Network</u></b></small>
    </td>
    <?php
    // Make a MySQL Connection
    mysql_connect("localhost""user""pass") or die(mysql_error());
    mysql_query("SET NAMES 'UTF8'");
    mysql_select_db("database") or die(mysql_error());

    // Get all the data from the "example" table
    $result mysql_query("SELECT * FROM CN ORDER BY id")
    or die(
    mysql_error());

    while(
    $row mysql_fetch_array$result )) {
        echo 
    "<tr>
              <td width=\"33%\"><small>{$row['Date']}</small></td>
              <td width=\"28%\"><small>{$row['Time']}</small></td>
              <td width=\"38%\"><small>{$row['Title']}</small></td>
              </tr>"
    ;
        
    }
    ?>
    </table><br>
    <center><small><i>TV Tokyo times are JST (GMT+9)<br>
    Cartoon Network times are EST (GMT-5)</i></small></center>
    </td>
    </tr>
    </table>
    </td>
    <td><a href="#"><img src="#" border="0"  alt="" /></a></td>
    </tr>
    </table></center>
    That's what my code looks like when it's in table form. Now I've attempted to convert it into CSS, but I'm not sure if I'm doing it correctly. I think I'm doing it wrong. The part that I think I'm doing wrong is the CSS. I'm not sure if all those selectors are necessary or not.

    My CSS:

    Code:
    #schedule1 {
    width:80%;
    margin:auto;
    }
    
    #schedule2 {
    width:80%;
    margin:auto;
    border:solid 1px;
    }
    
    #schedule3 {
    width:100%;
    }
    
    td.schedule4 {
    text-align:center;
    }
    
    p.schedule5 {
    text-decoration:underline;
    font-size:18px;
    }
    
    #schedule6 {
    text-align:center;
    }
    My HTML file:

    PHP Code:
    <table id="schedule1">
    <tr>
    <td>
    <table id="schedule2">
    <tr>
    <td>
    <table id="schedule3">
    <tr>
    <td colspan="3" class="schedule4">
    <p class="schedule5">TV Schedule</p>
    </td>
    </tr>
    <tr>
    <td colspan="3" class="schedule4">
    <p class="schedule5"><b>TV Tokyo</b></p>
    </td>
    <?php
    // Make a MySQL Connection
    mysql_connect("localhost""user""pass") or die(mysql_error());
    mysql_query("SET NAMES 'UTF8'");
    mysql_select_db("database") or die(mysql_error());

    // Get all the data from the "example" table
    $result mysql_query("SELECT * FROM TVTokyo ORDER BY id")
    or die(
    mysql_error());

    while(
    $row mysql_fetch_array$result )) {
        echo 
    "<tr>
              <td width=\"33%\"><small>{$row['Date']}</small></td>
              <td width=\"28%\"><small>{$row['Time']}</small></td>
              <td width=\"38%\"><small>{$row['Title']}</small></td>
              </tr>"
    ;
        
    }
    ?>
    </tr>
    <tr>
    <td colspan="3" class="schedule4">
    <p class="schedule5"><b>Cartoon Network</b></p>
    </td>
    <?php
    // Make a MySQL Connection
    mysql_connect("localhost""user""pass") or die(mysql_error());
    mysql_query("SET NAMES 'UTF8'");
    mysql_select_db("database") or die(mysql_error());

    // Get all the data from the "example" table
    $result mysql_query("SELECT * FROM CN ORDER BY id")
    or die(
    mysql_error());

    while(
    $row mysql_fetch_array$result )) {
        echo 
    "<tr>
              <td width=\"33%\"><small>{$row['Date']}</small></td>
              <td width=\"28%\"><small>{$row['Time']}</small></td>
              <td width=\"38%\"><small>{$row['Title']}</small></td>
              </tr>"
    ;
        
    }
    ?>
    </tr>
    </table><br />
    <p id="schedule6"><i>TV Tokyo times are JST (GMT+9)<br />
    Cartoon Network times are EST (GMT-5)</i></p>
    </td>
    </tr>
    </table>
    </td>
    <td><a href="#"><img src="#" border="0"  alt="" /></a></td>
    </tr>
    </table>
    Help is appreciated!
    Last edited by Bob42; 12-29-2007 at 02:27 AM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Hm, I don’t see many changes in the second attempt other than some IDs added. I guess you have to learn the basics of CSS and its interaction with HTML before.

    Number one: We/You don’t convert HTML to CSS. Websites have always been and are still made of plain HTML. CSS is only there to give this HTML a specific look, i.e. to style the HTML. The only difference is the approach we have nowadays as we’re removing everything from the HTML that is of purely stylistic nature, effectively separating structure/information and the styling/layout thereof.

    Separating structure from layout is also what you probably call “converting HTML tables to CSS”. Actually what that means is: Since tables have been invented (and while browsers were lacking proper support of CSS) they were used to create a page layout which actually is wrong because tables are made to structure tabular data (i.e. telephone directories, stock exchange results, sports results, etc… everything you would also do with Excel or similar programs) in a semantic way, not create a page layout.

    The current approach is to separate plain structure of information and the styling in that way that layout tables and stylistic HTML elements (e.g. center, font, etc.) and attributes (e.g. width, bgcolor, align, etc.) are removed and replaced by semantic HTML, and the styling is done with CSS.

    So, what you need to do is remove all the tables you are currently using to create a page layout (that means the table you use to display your TV schedule is still allowed and good, and the only correct way, actually; only you must not nest tables to create a multi-column page layout or whatever), and structure your page logically and semantically (i.e. page header, content, footer sections, use headlines where they apply, etc.) and style those with CSS.

    For example this snippet:

    Code:
    <td colspan="3" align="center">
    <small>
    <font size="4"><u>TV Schedule</u></font></small>
    </td>
    could be written as:
    Code:
    <h1>TV Schedule</h1>
    and in the CSS you would do all the styling like underline, font size, etc.:
    Code:
    h1 {
      color: red;
      font-family: Arial, Helvetica, Sans-serif;
      text-decoration: underline;
    }
    Your entire page could look somewhat like this (PHP replaced and CSS put as internal stylesheet for demonstration only):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	margin: 0;
    	padding: 0;
    	background: white;
    	color: black;
    	font-family: Arial, Helvetica, sans-serif;
    }
    #container {
    	width: 80&#37;;
    	margin: auto;
    }
    h1 {
    	font-size: 20px;
    	text-decoration: underline;
    	text-align: center;
    }
    table {margin: 10px auto;}
    caption {
    	text-decoration: underline;
    	font-size: 15px;
    }
    .col1 {width: 33%;}
    .col1 {width: 28%;}
    .col1 {width: 38%;}
    td {font-size: 13px;}
    #disclaimer {
    	font-style: oblique;
    	font-size: 12px;
    	text-align: center;
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<h1>TV Schedule</h1>
    	<table>
    		<caption>TV Tokyo</caption>
    		<colgroup>
    			<col class="col1" />
    			<col class="col2" />
    			<col class="col3" />
    		</colgroup>
    		<tr>
    			<td>{$row['Date']}</td>
    			<td>{$row['Time']}</td>
    			<td>{$row['Title']}</td>
    		</tr>
    	</table>
    	<table>
    		<caption>Cartoon Network</caption>
    		<colgroup>
    			<col class="col1" />
    			<col class="col2" />
    			<col class="col3" />
    		</colgroup>
    		<tr>
    			<td>{$row['Date']}</td>
    			<td>{$row['Time']}</td>
    			<td>{$row['Title']}</td>
    		</tr>
    	</table>
    	<div id="disclaimer">TV Tokyo times are JST (GMT+9)<br />
    Cartoon Network times are EST (GMT-5)</div>
    </div>
    </body>
    </html>
    I’ve used the caption element for the table caption and colgroup and col to specify a general width for the columns which makes it easy for the browser to calculate the size for large tables before having parsed the entire table code. And although an HTML width attribute is allowed for col elements in order to separate styling from structure I’ve used classes and applied the width through CSS to keep things clean.

    I hope that explains some things?

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    100
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for your post. That really helped and explained a few things. That really helped me understand CSS a bit better.
    Now what about that image at the bottom of the code I posted before? I want that image to be displayed at the right of the table. I've messed around a bit, but each time I try it, the image gets placed at the bottom of the table.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Hmm, what purpose does this image serve?
    The easiest (and most intriguing) way would be to just position it with CSS. However, be aware that this is not always the best or easiest solution and although it looks simple it has some hidden caveats for people new to this so use with caution when you think of using it.

    Put the image at the bottom, after the TV times disclaimer and give it an ID (i.e. the link around the image). Then you can style it like this:

    Code:
    #whatever {
      position: absolute;
      top: 50px;
      right: 10px;
    }
    However, as I said: use with caution. I don’t know what his image is about and there could be better ways to do it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •