How to Put Text in Columns With HTML

Save

Displaying text in columns can help improve the readability of your website. One way to format text so that it displays in columns is to use an HTML table. HTML tables support any number of columns. You can manage the width and alignment of each column using column groups. Let’s look at a simple example of a web page that displays game scores.

Things You'll Need

  • Notepad or other text editor
  • Internet Explorer or other web browser

Create an HTML Page

  • Click the “Start” button. Choose the “All Programs” menu item. Choose the “Accessories” menu item. Choose the “Notepad” menu item.

  • Type the following in the document:

    <html>
    <head>
    <title>Game Scores</title>
    </head>
    <body>
    </body>
    </html>

    This HTML code defines the basic structure of an HTML page and sets the text in the browser’s title bar to “Game Scores.” Leave the <body> element empty for now. That is where you will add the page content.

  • Click the “File” menu item and choose “Save.” If your “Documents” folder is not selected, select it. Choose “All Files” from the “Save as Type” drop-down list. Type “columns.html” in the “File name” field and click the “Save” button.

  • Click the “Start” button and choose “Documents” to open Window Explorer. Expand the “Documents” icon in the left-hand pane. Choose the “My Documents” folder icon.

  • Double-click “columns.html” and verify that a document with the title “Game Scores” opens in your browser. Keep the browser window open.

Add a Table to the Web Page

  • Bring Notepad to the foreground. Add the following HTML within the <body> element:

    <table>
    <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Round 1</th>
    <th>Round 2</th>
    <th>Round 3</th>
    </tr>
    </table>

    You use a <table> element to create a table. A table includes columns and rows. You use the <tr> (table row) element to define the rows. Within each row, you define columns that contain content. You use a <th> (table header) element to add a column that displays text using a bold font. Here you have created one row that has five columns of bold text.

  • Click the “File” button and choose “Save” to save your changes.

  • Bring the browser window to the foreground. Right-click the empty page and choose “Refresh.” Your headings should be displayed.

  • Bring Notepad to the foreground. Add the following code on the line directly below the </tr> tag:

    <tr>
    <td>John</td>
    <td>Smith</td>
    <td>80</td>
    <td>75</td>
    <td>165</td>
    </tr>

    <tr>
    <td>Mary</td>
    <td>Dodd</td>
    <td>92</td>
    <td>140</td>
    <td>132</td>
    </tr>

    The <td> (table data) element is used to define a column that displays text using a normal font. Here you have created two rows that have five columns each.

  • Click the “File” button and choose “Save” to save your changes.

  • Bring the browser window to the foreground. Right-click the empty page and choose “Refresh.” Your table should be displayed.

Change Column Width and Alignment

  • Bring Notepad to the foreground. Modify the HTML by adding the following code immediately after the <table> tag:

    <colgroup span="5" width="100">
    </colgroup>

    The <colgroup> element is used to define a width that applies to multiple columns. You use the span attribute to set the number of columns included in the group. You use the width attribute to define the width of the column in pixels.

  • Click the “File” button and choose “Save” to save your changes.

  • Bring the browser window to the foreground. Right-click the empty page and choose “Refresh.” Your table should be displayed. Notice that the table headings are not aligned with the table data.

  • Change your code so that the <colgroup> block looks like this:

    <colgroup span="5" width="100">
    <col span="2" align="center" />
    </colgroup>

    The <col> element is used to define formatting that applies to one or more columns. In this case, you are setting the alignment of the left-most two columns to “center” alignment.

  • Click the “File” button and choose “Save” to save your changes.

  • Bring the browser window to the foreground. Right-click the empty page and choose “Refresh.” Your table should be displayed. Notice that the table data in the first two columns is centered beneath the heading.

  • Change your code so that the <colgroup> block looks like this:

    <colgroup span="5" width="100">
    <col span="2" align="center" />
    <col span="3" width="50" align="right" />
    </colgroup>

    The second <col> element applies to the next three columns in the table. You are setting the width of those columns to 50 pixels and the alignment of the text within those columns to right-justified.

  • Click the “File” button and choose “Save” to save your changes.

  • Bring the browser window to the foreground. Right-click the empty page and choose “Refresh.” Your table should be displayed. Notice that last three columns are narrower and the data within them is right-justified with the column headings.

Tips & Warnings

  • If you choose to use a different text editor than Notepad, your steps to create and save a document will be different.
  • If you choose to use a different browser than Internet Explorer, your steps to refresh the web page might be different.
  • When writing HTML code, make sure each opening tag has a matching closing tag.

References

  • Photo Credit Checking credit card statement image by Elzbieta Sekowska from Fotolia.com
Promoted By Zergnet

Comments

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!