by-expession

Expression Web Resources

CSS table layout

Latest post 09-26-2007 8:27 AM by cdwise. 12 replies.
  • 09-23-2007 3:09 PM

    • Pepe
    • Top 25 Contributor
    • Joined on 09-12-2007
    • Posts 20

    CSS table layout

    I want to make a CSS layout for a table (750px width) with five columns and border around the cells. The table should be centered on the page and the items on it also centered. Something like this:

     http://www.parroquiasanfranciscosj.com/Fotomontajes/fotomontajes.htm

    Any hint or layout anywhere?

     Thanks!

    Microsoft MVP Windows - Shell / User
  • 09-23-2007 4:06 PM In reply to

    • cdwise
    • Top 10 Contributor
    • Joined on 12-22-2006
    • Houston, TX
    • Posts 541

    Re: CSS table layout

    Make your table have the number of row and columns you want then really the easiest way to put borders on all cells and the outside is to use html border=1 (or whatever width you want the border to be. For CSS then would suggest something like this:

    table {border: 1px solid white; border-collapse: collapse; width: 600px; margin: 10px auto;}
    td, th {border: 1px solid white; border-collapse: collapse; vertical-align: top; padding-left: 6px; padding-right: 6px; }

    Adding the padding will keep your text from touching the borders.

    Cheryl D Wise MS MVP Expression Instructor: starttoweb.com

  • 09-24-2007 10:43 AM In reply to

    • Pepe
    • Top 25 Contributor
    • Joined on 09-12-2007
    • Posts 20

    Re: CSS table layout

    Thanks, Cheryl!

     I'll try to "tweak" it by myself!

    Microsoft MVP Windows - Shell / User
  • 09-24-2007 4:00 PM In reply to

    • cdwise
    • Top 10 Contributor
    • Joined on 12-22-2006
    • Houston, TX
    • Posts 541

    Re: CSS table layout

    If you run into problems, post a link and the problem you are having. Someone probably Pat, Jonathan or I will get back to you.

    Cheryl D Wise MS MVP Expression Instructor: starttoweb.com

  • 09-25-2007 1:53 PM In reply to

    • Pepe
    • Top 25 Contributor
    • Joined on 09-12-2007
    • Posts 20

    Re: CSS table layout

    What command shoud I add for the text to vertically center in the table cell?
    Microsoft MVP Windows - Shell / User
  • 09-25-2007 2:04 PM In reply to

    • Pat Geary
    • Top 10 Contributor
    • Joined on 12-22-2006
    • Harrisonburg VA
    • Posts 48

    Re: CSS table layout

    I THINK the default is vertical align middle but the style would be vertical-align: middle: for the td styling so with what Cheryl gave you  previously -

    td, th {border: 1px solid white; border-collapse: collapse; vertical-align: middle; padding-left: 6px; padding-right: 6px; }

    pat 

     

     

    Pat Geary MS MVP - FrontPage
    http://www.expression-web-tutorials.com/
    http://www.genealogy-web-creations.com/
    http://www.frontpage-to-expression.com/

    Filed under:
  • 09-25-2007 2:46 PM In reply to

    • Pepe
    • Top 25 Contributor
    • Joined on 09-12-2007
    • Posts 20

    Re: CSS table layout

    My apologies. It was so obvious that I didn't see it...
    Microsoft MVP Windows - Shell / User
  • 09-25-2007 2:55 PM In reply to

    • Pat Geary
    • Top 10 Contributor
    • Joined on 12-22-2006
    • Harrisonburg VA
    • Posts 48

    Re: CSS table layout

    Apologies are not necessary. Glad to hlep.

     

    pat 

    Pat Geary MS MVP - FrontPage
    http://www.expression-web-tutorials.com/
    http://www.genealogy-web-creations.com/
    http://www.frontpage-to-expression.com/

  • 09-25-2007 3:25 PM In reply to

    • Pepe
    • Top 25 Contributor
    • Joined on 09-12-2007
    • Posts 20

    Re: CSS table layout

    Truly, CSS is a powerful simplification (among other questions). Here, I had a table somewhat involved and with CSS I have simplified it:

     http://www.parroquiasanfranciscosj.com/Fotomontajes/fotomontajes.htm

     One question: "div" tag is an old HTML tag or a new XHTML-CSS one?

    Microsoft MVP Windows - Shell / User
  • 09-25-2007 3:49 PM In reply to

    • Pat Geary
    • Top 10 Contributor
    • Joined on 12-22-2006
    • Harrisonburg VA
    • Posts 48

    Re: CSS table layout

    <div> tags are usable in both HTML and XHTML. OK next step is to validate your code and it will give you various error messages. Some of them because your styling in the XHTML code needs to be moved to the style sheet. And ALL images require an ALT tag which describes the image or a blank alt tag if it is just a decorative image.

    So the big image in the top box could be specified as the background for that cell or add an ALT tag to it.

    With the page opened in code view | Right Click and choose apply xml formatting rules since you are using XHTML coding. This will add any self closing / to the code for you.

    The other validation error that comes up is -

    Line 29, Column 97: cannot generate system identifier for general entity "FamilyID".

    …ownloads/details.aspx?displaylang=es&FamilyID=428d5727-43ab-4f24-90b7-a94784a

    An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".

     

    which is telling you that anytime the ampersand is used in the url it needs to be changed to the code for the ampersand which is &amp;

     You have a style3 applied to the code which does not exist so you need to get rid of it and double check that your opening and closing tags on the tr and td match

     

    pat
     

     


    Pat Geary MS MVP - FrontPage
    http://www.expression-web-tutorials.com/
    http://www.genealogy-web-creations.com/
    http://www.frontpage-to-expression.com/

  • 09-25-2007 5:22 PM In reply to

    • cdwise
    • Top 10 Contributor
    • Joined on 12-22-2006
    • Houston, TX
    • Posts 541

    Re: CSS table layout

    <div> has been around since at least html 4.0 without checking I don't know if it was in html 3.2 or not.

    Cheryl D Wise MS MVP Expression Instructor: starttoweb.com

  • 09-26-2007 3:06 AM In reply to

    • Pepe
    • Top 25 Contributor
    • Joined on 09-12-2007
    • Posts 20

    Re: CSS table layout

    Ok, thank you very much! No validation errors now (but BOM which I don't know how to solve it).

    Microsoft MVP Windows - Shell / User
  • 09-26-2007 8:27 AM In reply to

    • cdwise
    • Top 10 Contributor
    • Joined on 12-22-2006
    • Houston, TX
    • Posts 541

    Re: CSS table layout

    BOM is not an error, it is a warning.

    Under the UTF-8 specification a BOM is the recommened way to indicate that a page is UTF-8. The problem lies in that PHP doesnot understand the BOM and insists on displaying it causing problems.

    Cheryl D Wise MS MVP Expression Instructor: starttoweb.com

Page 1 of 1 (13 items) | RSS
Powered by Community Server (Commercial Edition), by Telligent Systems Sponsored by: Start to Web
@ 2005-2008 Cheryl D Wise