html table columns

Discussion in 'HTML Basics' started by Big D, Feb 27, 2011.

  1. Big D

    Big D New Member

    How can I put strings of data into table columns? For example, say I wanted to put the following data list into 5 columns of 4 cells each, with Fahan Lower to Faithlegg in the first column, Falls Upper to Farbane in the second, etc., is there an easy way to do this?

    Fahan (Lower)
    Fahan (Upper)
    Fahey
    Faithlegg
    Falls Upper
    Famagh Church
    Fanlobbus
    Farbane
    Farcet
    Farihy
    Fartagh
    Faughanstown
    Faughanvale
    Faughart
    Faughley
    Favoran
    Feacle
    Fedamore
    Feighan of Fore
    Feighcullen
     
  2. mneylon

    mneylon Administrator Staff Member

    Where is the data coming from?

    Just trying to understand what you are trying to do
     
  3. Big D

    Big D New Member

    Hello. Yes, I apologise if I wasn't too clear. The data gets generated alphabetically from a database, and I'm trying to create an alphabeticla index in 5 cols rather than having it all in one big long line (as displayed in the original post). Basically, I want to split the data up so that every, say, 5th entry begins a new column, like:

    Fahan (Lower) | Falls Upper | Farcet | Faughanvale | Feacle
    Fahan (Upper) | Famagh Ch | Farihy | Faughart | Fedamore
    Fahey | Fanlobbus | Fartagh | Faughley | Feighan of Fore
    Faithlegg | Farbane | Faughanstown | Favoran | Feighcullen

    Does that make any more sense?

    I can create a 5 col table okay, but cannot find an easy solution to the way I have suggested above.
     
  4. Big D

    Big D New Member

    Maybe the following makes the required layout clearer?

    [Column 1]
    Fahan (Lower)
    Fahan (Upper)
    Fahey
    Faithlegg

    [Column 2]
    Falls Upper
    Famagh Church
    Fanlobbus
    Farbane

    [Column 3]
    Farcet
    Farihy
    Fartagh
    Faughanstown

    [Column 4]
    Faughanvale
    Faughart
    Faughley
    Favoran

    [Column 5]
    Feacle
    Fedamore
    Feighan of Fore
    Feighcullen
     
  5. cpmedia

    cpmedia New Member

  6. MOH

    MOH New Member

    Presume you probably have this sorted, but the easiest way without any code would probably be something like:

    Code:
    <div class="container">
    <div class="cell">Fahan (Lower)</div><div class="cell">Fahan (Upper)</div><div class="cell">..etc..</div>
    </div>
    
    Then in your CSS, make the cells float:left, give them a fixed width, and give the container 4x times the width (may need to adjust to allow for padding/borders, so every 5th cell will spill onto a new row

    [edit]
    Bah, just reread this, that's obviously with the names going across instead of down - sorry.
     

Share This Page