10 replies [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

I have to reduce the weight of the page and would like to use only css but don't know how to aproach the colums and cells.

I only need help with the content part, I have no problems with the heading or footer

any idea? thanxs

this is the web:

http://bittorrent.frozen-layer.net/stats.php

i need to change this to pure css without tables,

<tr bordercolor="#FFFFFF" bgcolor="#CCCCCC">    <td nowrap>29/04/2003</td>
    <td nowrap><div align="left">&nbsp&nbsp<a href="archivo.php?id=461">.hack//SIGN 22</a></div></td>
    <td nowrap><div align="center"> 153</div></td>
    <td nowrap><div align="center"><font color=red><b>0</b></font></div></td>

    <td nowrap><div align="center"><b>1</b></div></td>
    <td nowrap><div align="center"><b>54</b></div></td>
    <td nowrap><div align="center"><b>138</b></div></td>
    <td nowrap><div align="center">1112</div></td>
    <td nowrap><div align="center">2</div></td>
    <td nowrap><div align="center">   0KB/s</div></td>

    <td nowrap><div align="center">   0.08GBs</div></td>

    </tr>
  
<tr bordercolor="#FFFFFF" bgcolor="#EEEEEE">    <td nowrap>02/05/2003</td>
    <td nowrap><div align="left">&nbsp&nbsp<a href="archivo.php?id=496">.hack//SIGN 23</a></div></td>
    <td nowrap><div align="center"> 148</div></td>

    <td nowrap><div align="center"><font color=green><b>2</b></font></div></td>
    <td nowrap><div align="center"><b>1</b></div></td>
    <td nowrap><div align="center"><b>34</b></div></td>
    <td nowrap><div align="center"><b>94</b></div></td>
    <td nowrap><div align="center">1108</div></td>
    <td nowrap><div align="center">3</div></td>

    <td nowrap><div align="center">   0KB/s</div></td>
    <td nowrap><div align="center">   0.49GBs</div></td>

    </tr>

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 16 years 17 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

any ideas of hoy to get rid of the table in this page?

One of the things that many web designers forget about is that tables are a great way of displaying information... when they're used properly.


Your page uses table layout the way it was originally intended, and there is no need for you switch it to pure CSS. As for reducing your code size, I don't think there are too many ways to do this, except possibly developing some sort of JavaScript loop that automatically types all that for you. This type of code generation would save on file size, but would put all the load on the client-side web browser. Tough call...

-Mike

</twocents>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 7 hours 23 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

any ideas of hoy to get rid of the table in this page?

To reduce the size of the page, why not remove the divs from the table.
That should bring the size down a fair bit.

You should also specify the width of the table, it will speed up rendering slightly.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 24 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Re: any ideas of hoy to get rid of the table in this page?

Yeah like Tony said, you can remove the DIVs at least, and maybe compress the font stuff into a class for each TD:

tr {
  bordercolor = #FFFFFF;
  bgcolor = #CCCCCC;
}
tr.alt {
  bgcolor = #EEEEEE;
}
td {
  text-align : center;
  font-weight : bold;
  white-space : nowrap;
}

td.archivo {
  text-align : left;
  font-weight : normal;
}

td.ul-green {
  color : green;
}

td.ul-red {
  color : red;
}

That's just an example. Note I put the most used stuff in the TD then change them you change them if necessary in the individual classes.

As you're using PHP, rather than deciding whether to write "font color='green'" or 'red' you can change the class name. And of course on each other row, put class="alt" to change the backround.

Hope that helps.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Anonymous
Anonymous's picture
Guru

New kid on the block

Guys

I'm a newbie to HTML writing and CSS - what is the rule of thumb for knowing when to use CSS instead of tables. If for example I see colspan or rowspan in a source file can I make a reasonable assumption the table is being used for layout rather than structure and is therefore a contender for a CSS?

I'm using HTML & XHTML, The Definitive Guide and getting confused - the chapter on tables says they're very useful for controlling layout which contradicts what I'm reading on the CSS forums. I'm groping around in the dark!

CHeers

Ben

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 24 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

any ideas of hoy to get rid of the table in this page?

If you've got a load of data that should be displayed in a table, then use it.
If you're just using the table to space things out, then it should be possible in CSS.

The example above is a good one - the main body is pure data in a table, which should stay that way - but the header and footer have no need to be in a table so could be done using DIVs.
Colspans can still be used in data, I suppose rowspans too, so no real rule of thumb. Unfortunately.

Tables are useful for controlling layout but that's not what they are intended for. But look around many large sites and you'll see them using tables, it's just the way things have been done in the past.

With CSS coming forward in web developer's minds a lot more and browsers being more compliant there should be a step forward.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 16 years 17 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

any ideas of hoy to get rid of the table in this page?

A good rule of thumb that I use, is that I try to imagine the given data presented in a textbook (I'm in college, so bear with me Wink If I can see the data presented in a tabular form in a textbook, then I know to use tables for my presentation/layout.

Also, who says you can't use CSS with tables? If you strip down your entire table markup to <td> and <tr> tags with no attributes (everything done via CSS), then I say you did a good job presenting tabular data.

-Mike

</twocents>

Anonymous
Anonymous's picture
Guru

any ideas of hoy to get rid of the table in this page?

DJSdotcom wrote:

<snip> If I can see the data presented in a tabular form in a textbook, then I know to use tables for my presentation/layout.

Also, who says you can't use CSS with tables? If you strip down your entire table markup to <td> and <tr> tags with no attributes (everything done via CSS), then I say you did a good job presenting tabular data.

-Mike

Hey Mike,

From what I've learned/read/gleaned, tables shouldn't be used for text formatting if it's just a web page (ie links on the left, content on the right); especially if there is lots of data on the page. A table gets rendered (displayed) only after ALL the data in it gets read, so some pages take a long time to display.

This goes against the principle of using HTML as a markup or text display / formatting language. Tables should be for tabular data (spreadsheet style, database info) and DIV, SPAN, P for making your weblog/movie review/opinion formatted in the browser. This allows a page that is loading slowly to be displayed as the data gets streamed in, even though it hasn't come to the ending HTML tag.

If I'm wrong, could someone point it out. Like I said thisis just what I've pieced together myself.

starchase
Offline
newbie
coastal georgia
Last seen: 16 years 10 weeks ago
coastal georgia
Timezone: GMT-4
Joined: 2003-05-12
Posts: 7
Points: 0

any ideas of hoy to get rid of the table in this page?

Just a thought . . . tables can be considered more than just spreadsheet-like. A table can be a list of pictures and captions, or any kind of data diplayed in rows and columns . . . just have to think "outside the box" (sorry about that!). Laughing out loud

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 12 years 6 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

any ideas of hoy to get rid of the table in this page?

Perhaps another good rule of thumb: If you're using tables for layout, don't.

Unless there's a clear semantic relationship between cell contents, tables aren't appropriate. HTML, after all, is (at least in modern versions) a markup language for defining logical structure. Layout is something we can handle with CSS.

Anyway, here's a gratuitous quote from W3C:
http://www.w3.org/TR/WCAG10/

Quote:
Tables should be used to mark up truly tabular information ("data tables"). Content developers should avoid using them to lay out pages ("layout tables").

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 16 years 17 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

any ideas of hoy to get rid of the table in this page?

Exactly Sven.

That's what I was trying to say in my last post, but the meaning might have been lost somewhere between my brain and what I typed as my reply Wink

-Mike

</twocents>