# Help with tables in Radiant?

**URL:** <https://www.ruby-forum.com/t/help-with-tables-in-radiant/126778>\
**Category:** Radiant CMS\
**Created:** [January 22, 2008, 5:05am UTC](https://www.ruby-forum.com/t/help-with-tables-in-radiant/126778 "2008-01-22T05:05:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rpheath](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/73ab20/32.png) [@rpheath](https://www.ruby-forum.com/u/rpheath)\
**Post date:** [January 22, 2008, 5:05am UTC](https://www.ruby-forum.com/t/help-with-tables-in-radiant/126778/1 "2008-01-22T05:05:31Z")

</div>

Does anyone have experience with building tables or tabular layouts from  
Radiant pages?

I’m trying to use a grid-based layout to show excerpts from my pages  
with  
four columns and an undetermined number of rows. The trouble is that the  
rows are of varying height, so I can’t just set the height attribute in  
css.

Here’s the page:  
[http://as.biola.artofmission.net:8000/staff-directory/](http://as.biola.artofmission.net:8000/staff-directory/)

If you look at it in Safari, you see what it’s _supposed_ to look like.  
It  
breaks in Firefox and IE.

Right now it’s laid out using an unordered list. Ideally I’d like to  
make it  
a table (since it’s tabular data), and then figure out how to make table  
rows with Radius tags. So after every fourth record, it would insert a  
new

 tag and start over. So far I haven't been able to figure this out.

Here’s the Radiant markup:

\<r:find url=“about-as/executive-leadership-team”\>

## Executive Leadership Team
 
 \<r:children:each\> \<li class=“\<r:cycle values=“first, second,  
third, fourth”/\>”\>\<r:content/\> \</r:children:each\>

Thanks for any help and advice you can give!

---

<div class="post-metadata">

**Author:** ![rpheath](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/73ab20/32.png) [@rpheath](https://www.ruby-forum.com/u/rpheath)\
**Post date:** [January 22, 2008, 5:42am UTC](https://www.ruby-forum.com/t/help-with-tables-in-radiant/126778/2 "2008-01-22T05:42:55Z")

</div>

When in doubt, use wacky background colors.  
Depending on your design, red, lime, yellow, and blue are quick  
keywords that clearly alter the view without altering the layout (like  
adding borders does). You could try floating the list items left (and  
set the ul to overflow: hidden so that it expands to contain the  
floated items)

I’d argue that this isn’t really tabular data, or at least that you  
don’t intend to display it as such since each new row doesn’t  
represent a new group, but a continuation of the previous one.  
Unordered list makes more sense to me.

Having said all that, I’m not sure how to achieve the table layout you  
want with radius tags. Sorry to be of no help there.

---

<div class="post-metadata">

**Author:** ![rpheath](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/73ab20/32.png) [@rpheath](https://www.ruby-forum.com/u/rpheath)\
**Post date:** [January 22, 2008, 7:01am UTC](https://www.ruby-forum.com/t/help-with-tables-in-radiant/126778/3 "2008-01-22T07:01:48Z")

</div>

Jim G. wrote:

> Unordered list makes more sense to me.
> 
> Having said all that, I’m not sure how to achieve the table layout you  
> want with radius tags. Sorry to be of no help there.
> 
> On Jan 21, 2008, at 11:05 PM, Ryan H. wrote:

I agree with Jim. Though I’m not such a purist that says you can never  
use a table for layout – I just think a table is more trouble than it’s  
worth here and not a good structural match anyway.

As to using tables with Radiant, I don’t understand your question.  
Using tables is like using any other markup with Radiant. You can. Or  
were you trying to automatically create this page from a db somehow with  
your own custom tags?

Anyway, this is more of a CSS/Markup question than a Radiant one. I’ll  
offer my thoughts, but if you want to discuss more, email me off the  
list.

My suggestion…  
So, I’d stay off of the tabular bit and keep your unordered lists. You  
can probably find a way to use inline-block but FireFox still doesn’t  
support it (though it does offer: -moz-inline-block which is similar).  
The quick solution is to return to the float: left (that is see you have  
commented out). The problem is that you need to clear every 4th item so  
that it fully wraps to the left and creates a new line (I might use  
something like

- . Then change your CSS:  
ul#staff li {  
float: left;  
width: 155px;  
margin: 0 10px 18px 0;  
vertical-align: top;  
list-style: none none inside; \<-- added this (display: block  
will accomplish this in many browsers too).  
}  
ul#staff li.newRow {  
clear: left;  
}

I realize that this isn’t ideal since you’re adding some style-info into  
markup but, hey you were considering tables – and that’s pure style  
embedded intermingled with markup – so I figure this solution would be  
acceptable.

Disclaimer: This might need some tweaking across browsers but probably  
not much if any. Works just fine in FF (don’t have time to test in all  
browsers right now).

By the way, some of your email addresses are too long and extend over  
into the next column.

Hope that helps,  
-Chris