Html two columns text

How to make text appear in columns in HTML

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!

7 Answers 7

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

 
header text
 
paragraph text
 
 
header text
 
paragraph text
 
 
header text
 
paragraph text
 
 

@answerSeeker 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.

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.

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

You might just end up with a HTML table:

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

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

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.

@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.

. 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.

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

 
@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"]) ) )
 

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

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

  is quite a bad idea really. Terrible to edit and doesn’t make the columns straight unless you use

font

Agree with jtheman for #1 point, for #2 table code doesn’t came up properly I meant adding

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

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

 
header text header text Header text text in column text in column text in column
 
 
 
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.
 
 
 
First title
 
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.
 
 
Second title
 
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.
 
 
Third title
 
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.
 
 
 
Источник
 
Using multi-column layouts
 
The properties defined in the CSS multi-column layout module extend the block layout mode , enabling the easy definition of multiple columns of text. People have trouble reading text if lines are too long. If it takes too long for the eyes to move from the end of one line to the beginning of the next, readers can lose track of which line they were on. To provide for a better user experience when reading text making use of a large screen, you should limit the width of text by using columns of text placed side by side, just as newspapers do.
 
Using columns
 
Column count and width
 
Two CSS properties control whether and how many columns will appear: column-count and column-width .
 
The column-count property sets the number of columns to a particular number. E.g.,
 
Example 1
 
HTML
 
div id="col"> p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p> p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. p> p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. p> p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. p> div> 
 
CSS
 
Result
 
The content will be displayed in two columns:
 
The column-width property sets the minimum desired column width. If column-count is not also set, then the browser will automatically make as many columns as fit in the available width.
 
Example 2
 
HTML
 
div id="wid"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div> 
 
CSS
 
Result
 
In a multi-column block, content automatically flows from one column into the next as needed. All HTML, CSS, and DOM functionality is supported within columns, as are editing and printing.
 
The columns shorthand
 
You can use either column-count or column-width . Because values for these properties do not overlap, it is often convenient to use the shorthand columns .
 
Example 3
 
In this example, the CSS declaration column-width: 12em is replaced by columns: 12em .
 
HTML
 
div id="col_short"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div> 
 
CSS
 
Example 4
 
In this example, the CSS declaration column-count: 4 is replaced by columns: 4 .
 
HTML
 
div id="columns_4"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div> 
 
CSS
 
Result
 
Example 5
 
The two CSS declarations column-width: 8em and column-count: 12 can be replaced by columns: 12 8em . The column-count portion of the shorthand is the maximum number of columns that will be present. The column-width is the minimum width each column should be.
 
HTML
 
div id="columns_12"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div> 
 
CSS
 
#columns_12  columns: 12 8em; > 
 
Result
 
Assuming a default 1em gap between columns, if the container is wider than 103ems (12 columns * 8em width each + 7 1em gaps), there will be 12 columns, each with a width of 8ems or more. If the container is less than 103ems wide, there will be fewer than 12 columns. If the container is less than 17ems wide ( 8em column + 8em column + 1em gap), the content will be displayed as a single column with no column gap.
 
Height balancing
 
CSS columns require that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal. Firefox does this.
 
However, in some situations it is also useful to set the maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. Therefore, if the height is constrained, by setting the CSS height or max-height properties on a multi-column block, each column is allowed to grow to that height and no further before adding new column. This mode is also much more efficient for layout.
 
Column Gaps
 
There is a gap between columns. The recommended default is 1em . This size can be changed by applying the column-gap property to the multi-column block:
 
Example 6
 
HTML
 
div id="column_gap"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div> 
 
CSS
 
#column_gap  column-count: 5; column-gap: 2em; > 
 
Result
 
Conclusion
 
CSS columns are a layout primitive that can help make large blocks of text easier to read when responsive content is viewed on wide viewports. Imaginative developers may find many uses for them, especially in conjunction with container queries and with the automatic height balancing feature.
 
Found a content problem with this page?
 
This page was last modified on Jun 7, 2023 by MDN contributors.
 
Your blueprint for a better internet.
 
Источник