/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Nov 16.2005

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. ?

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@David_HarrisonNov 16.2005 — 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.
Copy linkTweet thisAlerts:
@swatisharmaauthorNov 16.2005 — 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?
Copy linkTweet thisAlerts:
@swatisharmaauthorNov 16.2005 — 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?
Copy linkTweet thisAlerts:
@David_HarrisonNov 16.2005 — 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. [url=http://www.hddkillers.com/blogstuff/051020/helio/]Here's[/url] 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.
Copy linkTweet thisAlerts:
@UbikNov 17.2005 — 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.
Copy linkTweet thisAlerts:
@swatisharmaauthorNov 18.2005 — 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.
×

Success!

Help @swatisharma spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...