dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: Replacing <table>,<td> and <tr> tags with <div> and <span>

  1. #1
    Join Date
    Nov 2005
    Posts
    22

    Replacing <table>,<td> and <tr> tags with <div> and <span>

    Hi!

    I m required to design a page using CSS design technique. So I need to replace <table>, <td>,<tr> tags with <div> and <span>. Can ne1 tell me which tag is synonimous for what?? Till now I have been using <div> for <table> and <tr> and <span> in place of <td>. Am I right in doing so?
    I would be highly obliged for ne help.

  2. #2
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Write the markup for the page first, then write the CSS second. It totally depends on the content as to what the correct element for the job is.

    If you have a paragraph of text, use <p>, if you have a list of links, use an unordered or ordered list (<ul> or <ol>), if you have a heading, use one of the header tags <h1-6> etc.

    If you want to divide up the content into various sections then use a <div> elements, and if you need to alter the markup later so that you have another element to hang some styles on, then either <div> or <span> will do.

    Laying out a page based on CSS is totally different to laying out a page using tables, and therefore it requires a totally different mind set.
    Every fight is a food fight when you’re a cannibal.

  3. #3
    Join Date
    Nov 2005
    Posts
    22

    thanks David

    Thnx David 4 yr invaluable reply.
    but I m still confused with the use of CSS as a replacement of the usual <table>, <td> and <tr> tags of HTML. As u said using the above tags and CSS is completely different. Could u throw some light on the matter?

  4. #4
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Well, CSS was created in order to allow for the separation of content and presentation.

    The markup should simply be used to describe the content that it contains, the CSS is to make it look how you want it to look. One of the best examples of separation of content from presentation is http://www.csszengarden.com. Many different stylesheets, yet always the same markup, and it's possible to complately transform the look of the entire page.

    Edit: Here's something I made for someone on the forums a while back. He was trying to convert a particular page from tables to CSS but was having some difficulty. Here's what I came up with. Have a think about how you might have done it with tables, then look at the markup and CSS I used. At a glance it looks like a job for tables that are nested 3 deep, but the actual markup behind it is much simpler than that.
    Last edited by David Harrison; 11-16-2005 at 05:52 AM.
    Every fight is a food fight when you’re a cannibal.

  5. #5
    Ubik's Avatar
    Ubik is offline &lt;%= &quot;New Meja Hor&quot; %&gt;
    Join Date
    Nov 2005
    Location
    Earth
    Posts
    361
    You cannot swap it one-for-one, you have to learn how to manipulate css and xhtml to display properly in each different browser.

    I am undergoing that process of learning, and am starting to pick it up. People here are more knowledgeable than me, and their answers are very cryptic sometimes, and I've found that it's for my own good that they are cryptic because it makes me go LOOK for the answers myself, and most of the problems have many many solutions to them, depending on who you ask, each one may or may not be what I am looking for. Once you pick it up, you can start coming up with your own answers to layout structures.

    Yes, it might take a long time to learn it at first, and yes, you probably don't have time to learn it now.

  6. #6
    Join Date
    Nov 2005
    Posts
    22
    Thanx ubik 4 yr suggestion and advise. In 2-3 days i hv also discovered that i cannot use these one 4 one. I m tryin to understand and implement it now.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles