1. Home
  2. Forums Index
  3. Browser Side / CSS 11:57 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Convert this complex table to CSS?

         

BReflection

7:54 pm on Oct 18, 2004 (gmt 0)

10+ Year Member



I'd like to go the CSS route but I think i'm stuck. The table looks like this at present: 

<table width="205" height="189" border="1" cellpadding="0" cellspacing="0">
 <tr> 
 <td colspan="2" rowspan="2"><div align="center">1<br>
  </div></td>
 <td width="14%"><div align="center">2</div></td>
 <td width="15%"><div align="center">3</div></td>
 <td width="16%"><div align="center">4</div></td>
 <td width="18%"><div align="center">5</div></td>
 </tr>
 <tr> 
 <td height="42" colspan="2"> <div align="center">6</div></td>
 <td colspan="2"><div align="center">7</div>
  <div align="center"></div></td>
 </tr>
 <tr> 
 <td width="14%"><div align="center">8</div></td>
 <td width="23%" rowspan="2"><div align="center">12</div></td>
 <td><div align="center"><font size="2">14</font></div></td>
 <td><div align="center"><font size="2">15</font><font size="2"><br>
  </font></div></td>
 <td><div align="center"><font size="2">16</font><font size="2"><br>
  </font></div></td>
 <td><div align="center"><font size="2">17</font><font size="2"><br>
  </font></div></td>
 </tr>
 <tr> 
 <td><div align="center">9</div></td>
 <td><div align="center"><font size="2">18</font><font size="2"><br>
  </font></div></td>
 <td><div align="center"><font size="2">19</font><font size="2"><br>
  </font></div></td>
 <td><div align="center"><font size="2">20</font><font size="2"><br>
  </font></div></td>
 <td><div align="center"><font size="2">21</font><font size="2"><br>
  </font></div></td>
 </tr>
 <tr> 
 <td><div align="center">10</div></td>
 <td rowspan="2"><div align="center">13</div></td>
 <td><div align="center"><font size="2">22</font><font size="2"><br>
  </font></div></td>
 <td><div align="center"><font size="2">23</font><font size="2"><br>
  </font></div></td>
 <td><div align="center"><font size="2">24</font><font size="2"><br>
  </font></div></td>
 <td><div align="center"><font size="2">25</font><font size="2"><br>
  </font></div></td>
 </tr>
 <tr> 
 <td><div align="center">11</div></td>
 <td><div align="center"><font size="2">26</font><font size="2"><br>
  </font></div></td>
 <td><div align="center"><font size="2">27</font><font size="2"><br>
  </font></div></td>
 <td><div align="center"><font size="2">28</font><font size="2"><br>
  </font></div></td>
 <td><div align="center"><font size="2">29</font><font size="2"><br>
  </font></div></td>
 </tr>
</table>

icky! =)

vkaryl

8:28 pm on Oct 18, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Tables still make sense for tabular data. As to using CSS for a table of this sort, I just ran this through TopStyle Pro's "style upgrade" function which resulted in the following:

CSS -

div.c2 { text-align:center; }
table.c1 { width:205px; }
td.c3 { width:14%; }
td.c4 { width:15%; }
td.c5 { width:16%; }
td.c6 { width:18%; }
td.c7 { height:42px; }
td.c8 { width:23%; }
.c9 { font-size:x-small; }

HTML -

<table height="189" border="1" cellpadding="0" cellspacing="0" class="c1">
<tr>
<td colspan="2" rowspan="2"><div class="c2">1<br>
</div></td>
<td class="c3"><div class="c2">2</div></td>
<td class="c4"><div class="c2">3</div></td>
<td class="c5"><div class="c2">4</div></td>
<td class="c6"><div class="c2">5</div></td>
</tr>
<tr>
<td colspan="2" class="c7"> <div class="c2">6</div></td>
<td colspan="2"><div class="c2">7</div>
<div class="c2"></div></td>
</tr>
<tr>
<td class="c3"><div class="c2">8</div></td>
<td rowspan="2" class="c8"><div class="c2">12</div></td>
<td><div class="c2"><span class="c9">14</span></div></td>
<td><div class="c2"><span class="c9">15</span><span class="c9"><br>
</span></div></td>
<td><div class="c2"><span class="c9">16</span><span class="c9"><br>
</span></div></td>
<td><div class="c2"><span class="c9">17</span><span class="c9"><br>
</span></div></td>
</tr>
<tr>
<td><div class="c2">9</div></td>
<td><div class="c2"><span class="c9">18</span><span class="c9"><br>
</span></div></td>
<td><div class="c2"><span class="c9">19</span><span class="c9"><br>
</span></div></td>
<td><div class="c2"><span class="c9">20</span><span class="c9"><br>
</span></div></td>
<td><div class="c2"><span class="c9">21</span><span class="c9"><br>
</span></div></td>
</tr>
<tr>
<td><div class="c2">10</div></td>
<td rowspan="2"><div class="c2">13</div></td>
<td><div class="c2"><span class="c9">22</span><span class="c9"><br>
</span></div></td>
<td><div class="c2"><span class="c9">23</span><span class="c9"><br>
</span></div></td>
<td><div class="c2"><span class="c9">24</span><span class="c9"><br>
</span></div></td>
<td><div class="c2"><span class="c9">25</span><span class="c9"><br>
</span></div></td>
</tr>
<tr>
<td><div class="c2">11</div></td>
<td><div class="c2"><span class="c9">26</span><span class="c9"><br>
</span></div></td>
<td><div class="c2"><span class="c9">27</span><span class="c9"><br>
</span></div></td>
<td><div class="c2"><span class="c9">28</span><span class="c9"><br>
</span></div></td>
<td><div class="c2"><span class="c9">29</span><span class="c9"><br>
</span></div></td>
</tr>
</table>

That's a little "cleaner", but it's still a pretty complex layout. Does your data load into the cells from a db?

createErrorMsg

1:21 am on Oct 19, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Good lord! How OLD is that thing? It looks like it came out of a beta version of Dreamweaver 1.0! :)

<td><div align="center"><font size="2">27</font><font size="2"><br>
</font></div></td>

I would start by stripping out all the deprecated tags, such as...
<div align="center"></div>
<font size="2"></font>

...and of course...

<font size="2"><br></font>

...which is just silly. (Why would a <br> tag need a font size? Silly WYSIWYG!)

Taking out all that excess code will make the appearance and structure of the table itself a lot clearer, and allows you to focus on the elements that are important to the layout of the page...in the case of a table, the <tr> and <td> structure.

Lance

9:43 am on Oct 19, 2004 (gmt 0)

10+ Year Member



This is "pixel-perfect" in IE and pretty darn close in FF... 


<html> 
<head> 
<style> 
td 
{ 
 TEXT-ALIGN: center; 
PADDING: .25em; 
} 
.sm 
{ 
 FONT-SIZE: .75em; 
} 
</style> 
</head> 
<body> 
 <table width="205" border="1" cellpadding="0" cellspacing="0"> 
 <tr> 
  <td colspan="2" rowspan="2">1</td> 
  <td width="14%">2</td> 
  <td width="15%">3</td> 
  <td width="16%">4</td> 
  <td width="18%">5</td> 
 </tr> 
 <tr> 
  <td height="42" colspan="2">6</td> 
  <td colspan="2">7</td> 
 </tr> 
 <tr> 
  <td width="14%">8</td> 
  <td width="23%" rowspan="2">12</td> 
  <td class="sm">14</td> 
  <td class="sm">15</td> 
  <td class="sm">16</td> 
  <td class="sm">17</td> 
 </tr> 
 <tr> 
  <td>9</td> 
  <td class="sm">18</td> 
  <td class="sm">19</td> 
  <td class="sm">20</td> 
  <td class="sm">21</td> 
 </tr> 
 <tr> 
  <td>10</td> 
  <td rowspan="2">13</td> 
  <td class="sm">22</td> 
  <td class="sm">23</td> 
  <td class="sm">24</td> 
  <td class="sm">25</td> 
 </tr> 
 <tr> 
  <td>11</td> 
  <td class="sm">26</td> 
  <td class="sm">27</td> 
  <td class="sm">28</td> 
  <td class="sm">29</td> 
 </tr> 
 </table> 
</body> 
</html>

zonkd

12:35 pm on Oct 20, 2004 (gmt 0)

10+ Year Member



Lance, That's very impressive. Well done. (I think I'll borrow it, please.)

createErrorMsg - Spare Dreamweaver1 the criticism, please. I have many happy memories of that amazing little program. And who could say that of FrontPage?

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 11:57 pm May 1, 2026