Table vs CSS

[Kysmiley]

I am looking at setting up a table that would consist of one top row 100% width followed by 5, 7 colum, rows, spanning 100% width of the top row. What would be suggested for this type of table. CSS or a plain table layout.
Pat

[BonRouge]

I think it all depends what its for. Are you producing tabular data or do you just think you need a table to layout your page. If its the former - use a table - if it's the latter: [hotdesign.com...]

[edited by: DrDoc at 5:11 pm (utc) on Oct. 25, 2004]
[edit reason] Fixed broken URL [/edit]

[createErrorMsg]

What would be suggested for this type of table. CSS or a plain table layout.

This is the proverbial can-of-worms question here in the CSS forum. Without getting into the 'which is better' question, I'll just say that it really depends on (a)exactly what is going into each 'cell' in that layout, and (b)how well the layout will lend itself to linearity as a table.

one top row 100% width followed by 5, 7 colum, rows, spanning 100% width of the top row

5 rows with 7 columns each is a lot of 'cells,' and a very complex layout no matter what method you use.

My primary question is how many of those 'cells' will be holding actual content and how many will be holding layout space (spacer gifs, etc.) If the answer is that many of them are purely for layout purposes, you'd be much better off going the css-p route, since it should allow you to use a simpler, more intuitive layout scheme.

If, however, all 35 of those 'cells' will hold actual content, you'd really have to consider other factors in your decision.

[ronin]

If you were putting the same data onto an MS Word document, would you put it in a table (rather than using columns, tabs etc.)? If so, use a table.

[Kysmiley]

What I am wanting to do is create a script allowing users to create a personalized calander. So they top space would be for an image include or upload then each other cell would have a number 1 to 31 along with a form allowing users to input text, ie: birthdates special occations etc.
So i am trying to figure out the best way to set it up. The finished product will be printed to screen for final viewing b4 printing to paper
Pat
Sorry I was not more detailed earlier

[createErrorMsg]

create a personalized calander

kysmiley, that sounds really interesting. My first instinct is to say use a table, but that's probably because a calendar really IS a table. And it's a linear table, at that, meaning that the source code order of the information would be the same as the on screen order of the information, which means you could use a table for this layout and still maintain accessibility.

However, since this is the CSS forum...

If you strictly control the height and width of each day-box, you could left float them like this:

html:
<div id="calendar">
<div id="topimage"></div>
<div class="daybox">1</div>
<div class="daybox">2</div>
<div class="daybox">3</div>
<div class="daybox">4</div>
<div class="daybox">5</div>
<div class="daybox">6</div>
<div class="daybox">7</div>
<div class="daybox">8</div>
<div class="daybox">9</div>
...
</div>

css:
#calendar {
float:left;
width: 700px;
}
#imagebox {
width: 100%;
height: HEIGHT OF IMAGE;
background-image: WHATEVER;
}
.daybox {
float:left;
width: 100px;
height: 100px;
overflow: hidden; /*OR SCROLL*/
}

This would give you a calendar 700px wide. The first .daybox would float to the left beneath the image. The second through seventh would follow suit, lining up in a horizontal row. Since there wouldn't be enough room for .daybox #8, it would drop down and float left back to the edge, lining up right underneath .daybox #1. #9 through #14 would complete the second row, and so on.

As long as (a)all the boxes stayed only 100px wide (taken care of by coding it into a class name they all share), (b) they were all the same height (see below), and (c)the container div - #calendar - were wide enough to hold only seven boxes, it would work fine.

In Moz/FF, the height property on .daybox would ensure that it did not expand should the content exceed it's height. Unfortunately, IE treats height as if it were min-height, and auto-expands the height to allow for more content. I THINK overflow:hidden (or scroll) takes care of that, but I'm not really familiar with the overflow property so you might want to run that by someone else.

Anyway, an added benefit this method is that you could offer users the option to print off their calendar as a list of days, instead of a grid. By simply removing the floats and tweaking the styles, the content would line up in a vertical list of the contents from the boxes, #1 - #31 (or 29 or 30). Any user with styles disabled in their browser would also get this sensible list.

Good luck with this project!
cEM

[encyclo]

My first instinct is to say use a table, but that's probably because a calendar really IS a table.

createErrorMessage is right: this is a classic case of tabular data. This should absolutely be created with a table, as it is the most appropriate as well as semantically-correct way forward. Using

<div>

s removes the semantic aspect, and it would severely reduce the page's accessibility.

That is not to say you can't use CSS along with the table to add the appropriate styles, widths, colors etc. to that table. Also, you should use the correct table headings such as

<th>

, and add a

summary

to the table tag as well as using the appropriate

headers

attribute for your table cells. (If I get time later I'll post an example).

[vkaryl]

encyclo, that would be great and extremely helpful of you - I've got a couple of "tabular data" tables on a site or so (AND a calendar table as well), and every time I use Tidy, I get numerous error messages about headers n summaries n captions - and I'm just not very sure what I should be doing about this....

[choster]

Not to be simplistic... but why not mark up the table correctly with headers, summaries, and captions?

[vkaryl]

choster, I didn't know there was a bunch of things like that until I started really "living" here a while back. I just don't have any idea what all that's for: why a "caption"? What goes there? Is this table supposed to have a "name" and that's the "caption"? Summary? You want me to write a summary of everything that's in this table? Cell by cell?

I haven't a clue. First time I ever ran across any of this stuff was when I started using Tidy from the link in my editor.... I write tables by hand - if you don't know there are extras like that, they never get addressed....

It's never too late to learn, you know.

[encyclo]

OK, this is a very basic example of a calendar table (with only a 3-day week - I think you'll get the idea!):

<table summary="Calendar of events for January 2005">
<caption>January 2005</caption>
<tr>
<th id="mon">Monday</th>
<th id="tue">Tuesday</th>
<th id="wed">Wednesday</th>
</tr>
<tr>
<td headers="mon">Lorem</td>
<td headers="tue">ipsum</td>
<td headers="wed">dolor</td>
</tr>
<tr>
<td headers="mon">sit</td>
<td headers="tue">amet</td>
<td headers="wed">consectetuer</td>
</tr>
</table>

As you can see, the basic principles are:

Including an "executive" summary of the table's contents

Adding the table title using the

<caption>

tag rather than a

<td colspan="7">

Using the appropriate

<th>

tag for the headings

Adding an

id

attribute to each heading

Adding the

headers

attribute to show that the table cell is related to the appropriate heading

There are a load more things that you can use, especially with more complex data tables, including

scope="col"

, and using

abbr

if your headings are too long to be repeated endlessly by the screenreader software.

If you lay out your calendar using a load of

<div>

tags, you remove all of the meaning from the data - making it impossible for a visually-handicapped person to make any sense of the information. All they would get is a long list of disconnected text -with no idea what day or date the listed event relates to. This is precisely what tables are for, and it is important to use the right markup for the occasion. The automated accessibility tools won't be able to identify a tableless calendar and my pass the page regardless, but that doesn't mean that your page is accessible for it.

One important note: don't use any of these features when you are using a table for layout - use just the usual

<tr>

and

<td>

tags.

[vkaryl]

Thanks, encyclo. So - for a calendar or other sort of complex date/info relationship table it IS important, maybe EXTREMELY so, to utilize those other elements to provide relevant info to screen readers etc. But if your table is simply a way to display some tabular/columnar data within a CSS-styled page, it wouldn't be necessary to include all of that? Seems like it should be necessary anyway....

There's a LOT of stuff there that I've not run across before, no wonder I keep seeing rafts of warnings. I got used to hand-coding tables in between editors - it was just easier than messing with the "old guy", or loading DW4 (which I just hate) and then try to clean up code....

[encyclo]

Oh, I could also add this which I found after posting the above - it's a monthly calendar which is based on the one available in the WordPress blog default template:

<table summary="May 2004">
<caption>May 2004</caption>
<thead>
<tr>
<th abbr="Sunday" scope="col" title="Sunday">S</th>
<th abbr="Monday" scope="col" title="Monday">M</th>
<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
<th abbr="Thursday" scope="col" title="Thursday">T</th>
<th abbr="Friday" scope="col" title="Friday">F</th>
<th abbr="Saturday" scope="col" title="Saturday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td abbr="April" colspan="3" id="prev"><a href="">&laquo; Apr</a></td>
<td class="pad">&nbsp;</td>
<td abbr="June" colspan="3" id="next"><a href="">Jun &raquo;</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="6" class="pad">&nbsp;</td><td>1</td>
</tr>
<tr>
<td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td>
</tr>
<tr>
<td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
</tr>
<tr>
<td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td>
</tr>
<tr>
<td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td>
</tr>
<tr>
<td>30</td><td>31</td><td class="pad" colspan="5">&nbsp;</td>
</tr>
</tbody>
</table>

In this example, rather than identifying each column and using the

headers

attribute on each

<td>

, it uses

scope="col"

to indicate that the heading refers to everything in that column. Also to note, the

tfoot

element goes directly after the

thead

- this is supported in new browsers (it will be correctly placed at the bottom) but will mess up in ancient stuff like Netscape 4.

[vkaryl]

Again, my thanks. I copied both and saved so I can consider what all I'm missing here.

There's a lot to be said for having some books around or something I guess. I seem to be missing a bunch of stuff in re tables. But then again, tables were really the only things I actively hand-coded in notepad - most other stuff I used an editor for, even if it was antique (Luckman's WebEdit Pro) or one I disliked (DW4)....

[createErrorMsg]

If you lay out your calendar using a load of <div> tags ... All they would get is a long list of disconnected text -with no idea what day or date the listed event relates to

the bold is mine

This is an excellent point. If you used a CSS method, you would have to add the day name to every <div>. The table structure allows for that information to be accessible by creating a logical link between the header and the cell. (I knew tables were good for something.)

I agree 100% with encyclo that you should use a table for this project.

[Kysmiley]

wow lots of food for thought. Just wanted to thank everyone whom took time to answer this question. After i get the table layed out then I can work on the rest of the script and html input form with the CSS coding for other items in the table

[DrDoc]

Excellent thread!

[choster]

Very good, encyclo!