Help - Search - Members - Calendar
Full Version: Layout using tables?
Movable Type Community Forum > Additional Resources > Tips and Tricks
adjman666
Hi all,

I was wondering how to set up a front page with headlines and brief text previews which people then click on the Extended entry link to read the whole article.

I can do this with everything laid out one above the other on a page, and it works fine.

What I wanted to do was to use a table layout so that each headline and description is in a box and there are say four boxes across by however many down it needs.

For an example of what I'm after see www.theregister.co.uk

If this is possible could someone tell me where I need to put my (td) and (tr) tags please?

Thanks

Adjman
nammer
Someone may take a stab at answering this, but this seems more like an HTML question than one about MT. Here's a Webmonkey article on basic table structure, and another one on writing lean HTML (specifically tables). If you're really stuck and need expert help, feel free to check out BlogBarter; there are blog experts over there happy to lend all kinds of assistance.

Hope this helps -

Donna
adjman666
I can do html tables no problem, what I am trying to figure out by trial and error at the moment is how to get MT to put each seperate entry inside the (td) tags, so each entry gets put in a seperate table cell.

Hopefully that makes it a bit clearer

Thanks

Adjman
stepan
QUOTE (adjman666 @ Aug 22 2003, 04:50 AM)
If this is possible could someone tell me where I need to put my (td) and (tr) tags please?

You can use the MTGrid plugin to build your table for you.

Here is an example of how the results might look. You can click on the [Code] link on that page to see the template code behind it.
silverberry
CODE
<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0><TR>
<TD ALIGN=LEFT VALIGN=MIDDLE><MTDateHeader><$MTEntryDate format="%A | %x"$></MTDateHeader>
</TD><TD ALIGN=RIGHT VALIGN=MIDDLE><$MTEntryAuthor$> | <a href="<$MTEntryPermalink$>"><$MTEntryDate format="%X"$></a> <MTEntryIfAllowComments> | <a href="<$MTCGIPath$><$MTCommentScript$>?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false">Comments (<$MTEntryCommentCount$>)</a> </MTEntryIfAllowComments>
<MTEntryIfAllowPings> | <a href="<$MTCGIPath$><$MTTrackbackScript$>?__mode=view&entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false">TrackBack
(<$MTEntryTrackbackCount$>)</a> </MTEntryIfAllowPings>
</TD></TR><TR><TD colspan="2" ALIGN=RIGHT VALIGN=TOP><$MTEntryTitle$>
</TD></TR><TR><TD colspan="2" ALIGN=JUSTIFY VALIGN=TOP><$MTEntryBody$> <MTEntryIfExtended><a href="<$MTEntryPermalink$>#more">Continue reading "<$MTEntryTitle$>"</a></span><br/>
</MTEntryIfExtended>
</TD></TR></TABLE>


Which is basically going to organize your entries out like this:


DateAuthor Name | Comments | Track back
Entry Title #1
Entry Body #1
adjman666
Thanks for the tips guys - MTGrid looks exactly like what I want to do - I'm having a bit of trouble getting it to work though.

Where does the MTGrid.pl file have to go in my MT directory - I have put it in the main MT directory at the mo and 755'd it

here is the code, not sure if it should work with this or not?

CODE
<table>

<MTGrid num_columns="4">

<MTEntries>

<MTGridCell>
<MTGridIfLeftColumn><tr></MTGridIfLeftColumn>
<td>
    <a name="<$MTEntryID pad="1"$>"></a>
    <h3 class="title"><$MTEntryTitle$></h3>
    
    <$MTEntryBody$>
    <center>
    <MTEntryIfExtended>
    <a href="<$MTEntryPermalink$>#more"><img src="http://www.thedarkisrising.co.uk/pics/more.gif" border="0"></a><br />
    </MTEntryIfExtended></center>

</td>
<MTGridIfRightColumn></tr></MTGridIfRightColumn>
</MTGridCell>

</MTEntries>
<MTGridTrailingCells>
<MTGridIfLeftColumn></tr></MTGridIfLeftColumn>
<td> </td>
<MTGridIfRightColumn></tr></MTGridIfRightColumn>
</MTGridTrailingCells>
</MTGrid>

</table>


If this is wrong could you let me know what I should change?

Thank you all for your help smile.gif
stepan
QUOTE (adjman666 @ Aug 28 2003, 03:07 AM)
Where does the MTGrid.pl file have to go in my MT directory - I have put it in the main MT directory at the mo and 755'd it

It's a plugin so it goes into the plugins directory inside your MT directory.
robdumas
It sounds like you're rather a newbie to HTML, but I would say that, in the long run, it's better to do your site using Cascading Style Sheets to lay out the site. There are some really terrific resources on doing this out there, like A List Apart, the CSS Zen Garden, evolt.org and Eric Meyer's CSS/Edge.

I redid my whole site using XHTML and CSS, and I cut the code needed by over 50% by dropping table-based design. If you're getting started, take the time to develop skills that will allow you to create sites that are easier to change, more accessible to people with disabilities and easier to maintain and understand.

Table-based layouts are the past. Sites built using standards-compliant HTML and CSS will be ones you don't need to tear apart when you want to redesign them. I can do a whole new layout for my site just by creating a new stylesheet; I've cut the code in half; the site is readable, even going back to Mosaic 1.0 (which didn't even support tables). The benefits of using web standards, and not tables, are overwhelming.

Sorry to rant, but I think it's important to develop your skills right, especially when you're starting out.
stepan
QUOTE (robdumas @ Aug 29 2003, 04:21 PM)
Sorry to rant, but I think it's important to develop your skills right, especially when you're starting out.

Tables are perfectly valid for laying out tabular data. I'm not sure that this is the most appropriate example (theregister.co.uk actually has three vertical columns and not really a grid) but there are plenty of instances where a table makes more sense that CSS layout. For example, try laying out a 3 by n photoblog just using CSS (and let n by determined by the number of entries).

I think people tend to gravitate towards tables because their conceptual model is much simpler than that of the CSS box model. And unless you're experienced and/or patient, you have to fight hard to make your CSS styles work across all the browsers (that's really the browsers' fault, but you still have to deal with it).

Yes, CSS is great for laying out overall sections of your site, but if your data is tabular, by all means use a table.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.