How to make text appear in columns in HTML

Question

Sorry, this is probably a thick question, but how to I get HTML to display similar to using the tab button in Word? I want to display like this:

header text      header text      Header text  
text in column   text in column   text in column  

If i use the spacebar, it just ignores the spaces. Actually, I will be putting razor variables in the columns, but that's the general idea of what I'm trying to create.

No doubt there's a div tag or similar that represents the 'tab' function, or columnises the text - I just don't know it!

Borst

Tabstops: w3.org/People/howcome/t/970224HTMLERB-CSS/WD-tabs-970117.html – Ravin

Answer 1

You might just end up with a HTML table:

<table>
  <tr>
   <th>header text</th>
   <th>header text</th>
   <th>header text</th>
  </tr>
  <tr>
   <td>text in column</td>
   <td>text in column</td>
   <td>text in column</td>
  </tr>
 </table>

And a litte styling of course, you could check out this tool: http://tablestyler.com

Duplex

Tables should never be used for layouts. They're for tabular data. This isn't 1999. – Chaffee

How do you know it isn't tabular data? I see a header and I see columns. Not saying 100% it is, but it does smell like it. – Prophet

Right... because it is text. Text has no use in tabular data? Only symbols and numbers? – Prophet

@Diodeus Well I would never dream of coding table layouts, but this looked as tabular data to me! Easy markup for an unexperienced user too. – Duplex

...and teaching a bad habit they'll likely depend upon for a long time. Sure, tables have their place, but three columns with headers doesn't quite qualify as tablular data. – Chaffee

Impossible to say without more information. I.e. knowing what it will contain instead of that dummy stuff. – Prophet

@Diodeus He say he will "Put razor variables in the columns" - I read that more like tabular data than layout objects... – Duplex

@Prophet : Relax - you're both right, just from opposing viewpoints. It is tabular data in that I want a salesman's name at the top, and his sales, quotes, credits etc listed below his name. You've all been a help, and yes, I am inexperienced. – Borst

@Duplex Relax - you're both right, just from opposing viewpoints. It is tabular data in that I want a salesman's name at the top, and his sales, quotes, credits etc listed below his name. You've all been a help, and yes, I am inexperienced. – Borst

This 'Table solution' actually worked the simplest of all! Thanks everyone. – Borst

@Borst I thought so in the first place! Great you have a working solution! – Duplex

Answer 2

You need to use CSS + HTML, not character-based mark-up.

<div class="column">
    <h2>header text</h2>
    <p>paragraph text</p>
</div>
<div class="column">
    <h2>header text</h2>
    <p>paragraph text</p>
</div>
<div class="column">
    <h2>header text</h2>
    <p>paragraph text</p>
</div>

css:

.column {
     width:300px;
     float:left
}

Chaffee

For me too. I used this in wordpress. @Borst you should have chosen this as answer. – Parthenon

@Parthenon The table is what I used at that point in time. It would certainly be better to use this way instead, but table did what I wanted. Both are good answers. – Borst

I know this is obvious to web pros, but it threw me: the word column above is not a keyword. It could be myColumn or any other unique variable name. However, width and float as used above are keywords, and govern the behavior of the CSS tag they are included in. So basically, @Diodeus is using the column tag to tell the browser to constrain whatever matches this class to 300px and float it to the left. – Mere

Answer 3

All major browser do support now CSS3 where you can use column-count as follows:

<style>.columns{column-count: 3;}</style>

<div class="columns"> your text ... </div>

Broccoli

Answer 4

You can use the WebGrid helper for this (if what you're after is a Grid (with columns and rows)):

WebGrid Class Documentation

<div id="grid">
    @grid.GetHtml(
            headerStyle: "HeaderStyle",
                columns: grid.Columns(
            grid.Column(
                columnName: "NameOfDatabaseColumn",
                header: "Name Of Column"),
            grid.Column(
                columnName: "NameOfDatabaseColumn",
                header: "Name Of Column",
                format: @item["something"]),
            grid.Column(
                columnName: "NameOfDatabaseColumn",
                header: "Name Of Column",
                format: @item["something"]),
            grid.Column(
                columnName: "NameOfDatabaseColumn",
                header: "Name Of Column",
                format: @item["something"])
            )
        )
</div>

Aspergillum

Yes but the data is not in a database, it is calculated from database values. Simple HTML table fixed the issue. – Borst

Answer 5

Couple of things I can think of,

1) Use "& nbsp;" (remove space after &) with your static text in HTML, this will be converted to SPACE (not much recommended unless you are talking about only few lines of static content)

2) Use table and make table border invisible

header text header text header text

Leaseback

&nbsp; is quite a bad idea really. Terrible to edit and doesn't make the columns straight unless you use <pre> font – Duplex

Agree with jtheman for #1 point, for #2 table code doesn't came up properly I meant adding <table style="border-width: 0px"> to table definition. – Leaseback

Answer 6

If your text resembles tables, then you <table> as described in another answer. If your text, however, does not resemble tables, you can try the <pre> element

<pre> is short for preformatted text, which preserves whitespace and uses a monospace font. This way you can easily make the text align.

Example:

<pre>
header text      header text      Header text  
text in column   text in column   text in column  
</pre>

Cotenant

Answer 7

This question is the first one appearing in google when searching for columns in HTML. The accepted answer uses tables for layout purposes, which shouldn't be done.

Nowadays you can use the CSS properties columns or display: flex, which is much simpler than all the other answers and are widely supported by all browsers.

For this particular question display: flex works better, but for long texts where the headers don't need to be on top columns is enough.

section {
  display: flex;
}
article {
  padding: 0 2em;
}

<section class="container">
  <article>
    <h2>First title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices sapien ut nulla malesuada, at vehicula ex cursus. Suspendisse ac leo aliquet, gravida lectus eleifend, facilisis ante. In pretium tempus orci, id pretium ipsum. Nulla bibendum odio ut lobortis pharetra. Integer nec lectus pellentesque purus eleifend venenatis. In et sagittis ipsum, eget volutpat enim. Vivamus vel neque sit amet nisl vulputate scelerisque id in diam. Fusce pretium, est eget sodales faucibus, turpis erat sollicitudin nisl, a elementum lorem nisi quis nisi. Nullam tincidunt iaculis lectus. Morbi nec sem metus. Nulla cursus tincidunt cursus.</p>
  </article>
  <article>
    <h2>Second title</h2>
    <p>Pellentesque euismod iaculis dolor. Duis finibus arcu nec odio vulputate, vitae ullamcorper felis suscipit. Nullam neque arcu, finibus quis tincidunt eu, pretium nec est. Pellentesque sagittis malesuada mauris sed auctor. Donec neque urna, pharetra in libero in, posuere finibus massa. Nam eu maximus turpis. Sed faucibus, orci sit amet tristique facilisis, enim risus ornare diam, non interdum dolor metus nec sem. Phasellus non sodales justo. Pellentesque congue leo ut diam semper aliquet condimentum id neque. Cras nec eros quis nulla accumsan egestas ac quis purus. Suspendisse leo tellus, dapibus nec facilisis vitae, convallis sit amet ligula.</p>
  </article>
  <article>
    <h2>Third title</h2>
    <p>Morbi non semper dui. Suspendisse posuere dapibus ipsum, vitae gravida nisl pretium aliquet. Vivamus aliquet risus in libero luctus molestie. Proin imperdiet magna nunc, ac fermentum tellus egestas eu. Integer ac erat nisl. Aliquam erat volutpat. Etiam nec lorem ornare nisl sagittis pulvinar. Ut lobortis ullamcorper odio eu porttitor. Nunc luctus, sem quis dictum rutrum, sapien felis pharetra eros, id viverra risus turpis nec arcu. Donec rutrum, mauris ac mollis facilisis, felis nisi vehicula velit, vestibulum placerat velit augue ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse tempor rhoncus facilisis. Morbi pretium, mi quis feugiat rutrum, leo turpis malesuada nisl, at tristique eros leo vitae quam.</p>
  </article>
</section>

Caruso

Thanks for your comments. I actually did want it in a table, so it worked really well for me at the time. As it is well indexed by google now, it pops up for questions about similar functionality. – Borst