Hi, I have a really simple problem, but cant seem to work out a proper solution.
Basically, I need to arrange a bit of info into two columns, which would be really easy using tables, but I dont want to use them.
Some example data:
Adobe Pagemaker; Intermediate
Adobe Photoshop; Advanced
Adobe Premiere; Intermediate
Cool Edit Pro/2000; Intermediate
Corel Draw; Advanced
The names of the programs I want in the left column, and the skill level in the right column.
So whats the simplest way to do this using CSS?
CheersWhy don't you want to use tables? It looks like tablular data to me...well tables get a litlte messy and I havent used them much at all since learning about web assessibility.
I also thought that this data is more like a layout rather than a table. (if that makes sense).
So I thought that there would be a rally simple way of doing this using CSS, perhaps not...Yes there is a really simple CSS way but there is the false-illusion on some web forums that an accessible site cannot use tables because "they are bad!".ok so just out of interest sakes what would this solution be???!!!!
I think I could find it useful for other things as well, not just in the layout for this data.
I do agree that tables have their place if used correctly for their intended purpose.
cheersThere is a plethora of ways I just use an extremely crude one:
<style type="text/css">
.one {display: inline;
width: 200px;
border: 1px solid red ;}
</style>
<div class="one">Adobe PageMaker</div>
<div class="one">Intermediate</div>
No, you won't get a table by using that method but you should be able to get the jist.Originally posted by simon_gill
Some example data:
Adobe Pagemaker; Intermediate
Adobe Photoshop; Advanced
Adobe Premiere; Intermediate
Cool Edit Pro/2000; Intermediate
Corel Draw; Advanced
This looks to me like either tabular or description list content so you could have
<dl>
<dt>Adobe Pagemaker</dt>
<dd>Intermediate</dd>
<dt>Adobe Photoshop</dt>
<dd>Advanced</dd>
...
</dl>
Basically, I need to arrange a bit of info into two columns, which would be really easy using tables, but I dont want to use them.
Some example data:
Adobe Pagemaker; Intermediate
Adobe Photoshop; Advanced
Adobe Premiere; Intermediate
Cool Edit Pro/2000; Intermediate
Corel Draw; Advanced
The names of the programs I want in the left column, and the skill level in the right column.
So whats the simplest way to do this using CSS?
CheersWhy don't you want to use tables? It looks like tablular data to me...well tables get a litlte messy and I havent used them much at all since learning about web assessibility.
I also thought that this data is more like a layout rather than a table. (if that makes sense).
So I thought that there would be a rally simple way of doing this using CSS, perhaps not...Yes there is a really simple CSS way but there is the false-illusion on some web forums that an accessible site cannot use tables because "they are bad!".ok so just out of interest sakes what would this solution be???!!!!
I think I could find it useful for other things as well, not just in the layout for this data.
I do agree that tables have their place if used correctly for their intended purpose.
cheersThere is a plethora of ways I just use an extremely crude one:
<style type="text/css">
.one {display: inline;
width: 200px;
border: 1px solid red ;}
</style>
<div class="one">Adobe PageMaker</div>
<div class="one">Intermediate</div>
No, you won't get a table by using that method but you should be able to get the jist.Originally posted by simon_gill
Some example data:
Adobe Pagemaker; Intermediate
Adobe Photoshop; Advanced
Adobe Premiere; Intermediate
Cool Edit Pro/2000; Intermediate
Corel Draw; Advanced
This looks to me like either tabular or description list content so you could have
<dl>
<dt>Adobe Pagemaker</dt>
<dd>Intermediate</dd>
<dt>Adobe Photoshop</dt>
<dd>Advanced</dd>
...
</dl>