theiviaxx
04-06-2006, 02:00 PM
I hate using tables regardless of the situation. But i have this project that requires a layour like the attached image. Would it be best to use tables or CSS?
Click to See Complete Forum and Search --> : CSS or Tables?
Fang
04-06-2006, 02:15 PM
Looks like a table
NogDog
04-06-2006, 05:55 PM
Definitely looks like tabular material. One thing I would ask is that the thick black separator above the last row be done via row/cell margins and/or borders and not by an empty table row, as that aspect of it would be using table markup for layout.
EOBeav
04-07-2006, 12:14 PM
Rules of thumb:
Tables for layout purposes: Bad
Tables to display rows and columns of data: Good
Put all of that data into a plain table, then style it via CSS.
Tables for layout purposes: Bad
Tables to display rows and columns of data: Good
Put all of that data into a plain table, then style it via CSS.
theiviaxx
04-07-2006, 02:35 PM
i ended up doing it via CSS and no tables. I tried it with tables, but couldn't figure out how to set the height of the rows. I think it ended up looking about the same and with the same amount of CSS as using tables. Plus they told me it wasn't "pretty" enough so i had to add background images in there.
EOBeav
04-07-2006, 02:48 PM
The problem with that is that if somebody is using a non-standard browser, that information is going to be messed up pretty bad. If there's a table in there, at least the layout of the data remains intact. Just something to think about.
felgall
04-07-2006, 05:46 PM
It looks like tabular data. If you don't use a table to define it in the HTML then you haven't written HTML that is semantically correct. Not using tables for tabular data is just as bad as using tables for layout.
theiviaxx
04-07-2006, 07:11 PM
forgive me for asking this, but: how would i use tables without creating bg images for each cell? The bottom rwo will be red or greeen depending on who won the matches. So if i make bg images for each cell, it's a lot of work to say who won and who lost. By doing it with CSS, i just change two values and i'm done. Is there a similar way to do it with tables?
august
04-07-2006, 07:46 PM
1a <tr background="image.jpg"> 1b <tr bgcolor="colorvalue">
So if you want to style the table row with an image use 1a. For a color use 1b.
So if you want to style the table row with an image use 1a. For a color use 1b.
theiviaxx
04-07-2006, 08:40 PM
Ok, i re-wrote it using tables, it cut down on the CSS however tables don't respect the CSS padding and margin information given. For example, i gave the first player TD a class that has "padding: 0 0 0 6;" but there is no change. I suppose this is just a limitation of the table + CSS? So i am forced to use in blank <td>'s which is not good.
NogDog
04-07-2006, 08:55 PM
Here's my best shot:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Page Title</title>
<!-- link rel='stylesheet' href='style.css' type='text/css' -->
<style type="text/css">
<!--
table.score {
border-collapse: separate;
background-color: black;
color: white;
padding: 0;
border: none;
font: 80% "times roman", serif;
empty-cells: hide;
border-spacing: 2px;
}
.score .name{
width: 7em;
}
.score .right {
text-align: right;
}
col.score {
width: 2em;
}
.score td {
border: solid 1px #39c;
background-color: #036;
color: white;
padding: 1px 2px;
}
.score td.score {
text-align: center;
color: yellow;
}
.score td.colon {
background-color: black;
color: white;
border: none;
font-weight: bold;
padding: 1px;
}
.score td.winner {
background-color: #131;
border-color: #6c6;
}
.score td.loser {
background-color: #303;
border-color: #c69;
}
.spacer {
height: 1em;
}
.spacer td {
background-color: black;
}
-->
</style>
</head>
<body>
<table class="score">
<colgroup>
<col class="name">
<col class="score">
<col class="colon">
<col class="score">
<col class="name">
</colgroup>
<tr>
<td>Player 1</td>
<td class="score">2</td>
<td class="colon">:</td>
<td class="score">1</td>
<td class="right">Player2</td>
</tr>
<tr>
<td>Player 1</td>
<td class="score">2</td>
<td class="colon">:</td>
<td class="score">1</td>
<td class="right">Player2</td>
</tr>
<tr>
<td>Player 1</td>
<td class="score">2</td>
<td class="colon">:</td>
<td class="score">1</td>
<td class="right">Player2</td>
</tr>
<tr>
<td>Player 1</td>
<td class="score">2</td>
<td class="colon">:</td>
<td class="score">1</td>
<td class="right">Player2</td>
</tr>
<tr>
<td>Player 1</td>
<td class="score">2</td>
<td class="colon">:</td>
<td class="score">1</td>
<td class="right">Player2</td>
</tr>
<tr class="spacer">
<td colspan="5"></td> <!-- spacer (can't figure out better way) -->
<tr>
<td class="winner">Team 1</td>
<td class="score winner">10</td>
<td class="colon">:</td>
<td class="score loser">5</td>
<td class="right loser">Team 2</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Page Title</title>
<!-- link rel='stylesheet' href='style.css' type='text/css' -->
<style type="text/css">
<!--
table.score {
border-collapse: separate;
background-color: black;
color: white;
padding: 0;
border: none;
font: 80% "times roman", serif;
empty-cells: hide;
border-spacing: 2px;
}
.score .name{
width: 7em;
}
.score .right {
text-align: right;
}
col.score {
width: 2em;
}
.score td {
border: solid 1px #39c;
background-color: #036;
color: white;
padding: 1px 2px;
}
.score td.score {
text-align: center;
color: yellow;
}
.score td.colon {
background-color: black;
color: white;
border: none;
font-weight: bold;
padding: 1px;
}
.score td.winner {
background-color: #131;
border-color: #6c6;
}
.score td.loser {
background-color: #303;
border-color: #c69;
}
.spacer {
height: 1em;
}
.spacer td {
background-color: black;
}
-->
</style>
</head>
<body>
<table class="score">
<colgroup>
<col class="name">
<col class="score">
<col class="colon">
<col class="score">
<col class="name">
</colgroup>
<tr>
<td>Player 1</td>
<td class="score">2</td>
<td class="colon">:</td>
<td class="score">1</td>
<td class="right">Player2</td>
</tr>
<tr>
<td>Player 1</td>
<td class="score">2</td>
<td class="colon">:</td>
<td class="score">1</td>
<td class="right">Player2</td>
</tr>
<tr>
<td>Player 1</td>
<td class="score">2</td>
<td class="colon">:</td>
<td class="score">1</td>
<td class="right">Player2</td>
</tr>
<tr>
<td>Player 1</td>
<td class="score">2</td>
<td class="colon">:</td>
<td class="score">1</td>
<td class="right">Player2</td>
</tr>
<tr>
<td>Player 1</td>
<td class="score">2</td>
<td class="colon">:</td>
<td class="score">1</td>
<td class="right">Player2</td>
</tr>
<tr class="spacer">
<td colspan="5"></td> <!-- spacer (can't figure out better way) -->
<tr>
<td class="winner">Team 1</td>
<td class="score winner">10</td>
<td class="colon">:</td>
<td class="score loser">5</td>
<td class="right loser">Team 2</td>
</tr>
</table>
</body>
</html>
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.