How to Make Columns in Different Sizes in HTML

Columns are one of the basic methods of formatting text on paper.

Arranging the content of a website in rows and columns is one of the biggest strengths of HTML as a coding language. With only a small amount of code, you can create visible or invisible columns and rows to format your site's content into just about any configuration imaginable, without relying on frames or other workarounds that can cause problems for visitors.

Things You'll Need

• Word processor

Instructions

1. Open the HTML document you want to add columns to in your word processor.

2. Create a table in the spot you want to add the columns by adding table tags, which look like this: <table></table>. If you want the borders around the columns to be visible, you can add a space and the code border="1" to the opening table tag in between the word table and the closing bracket, making it look like this: <table border="1"></table>. All the rest of the code you add to create the columns will go in between these tags.

3. Add table data tags for each column you want to create. The table data tags for a single column look like this: <td></td>. All the content you want to place within each column will go in between the table data tags for that column. For example, if you want to create two columns, one containing the text "column 1" and the other "column 2," your code would look like this: <table border="1"><td>column 1</td><td>column 2</td></table>.

4. Add size attributes to each opening table data tag to define the size of that column. To do so, add a space and the code height="" width="" to the tag, in between the td and the closing bracket. Then add numbers, in pixels, in between each set of quotation marks to define the height and width of the column. All columns in the same row will be resized to be the same height as the tallest one, but you can adjust the width of each individually.

5. Add whatever content you want each column to contain. If you insert any content too wide for the width you set for the column, it will automatically resize to be wide enough to contain it, and if you insert too much content to be contained in the column at the overall size you set, it will automatically resize to be tall enough to contain it all.

References

• W3Schools: HTML Tables