HTML Lesson 11: Tables

2
32

Introduction

Be proficient in HTML tables can prove very helpful for your web design career. Not only are HTML tables used to present data in rows and columns, you can also use HTML tables to help organize information on your web page.

Even though a lot of people shy away from them, tables are extremely easy to use. They follow a very logical pattern and after you understand a few basic table elements, you will be able to excel in their usage. Let’s jump right in!

Basic Table Structure

Although HTML tables can be considered a complex element, they are broken down into these basic tags:

  • Opening and closing table tags: <table></table>
  • Opening and closing row tags: <tr></tr>
  • Opening and closing cell tags: <td></td>

To get started constructing an HTML table, use the opening <table> tag. Everything between this opening tag and the closing </table> tag is included in your table. Next let’s start describing the layout of the table. We do this by building a row with the <tr> tag and then creating individual cells with the <td> tag. When you have finished creating cells in a row, you close the row with the </tr> tag. You then repeat the process of beginning a new row, building the cells and closing the row. Let’s look at an example to make it easy.

Source Code Output
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3

Note for the demonstration we used the border=”1″ attribute and value to create a border in order to make it easier to visualize the structure of the table!

Caption

The tag is an effective tool for creating a title for your table. Let’s see it in action:

Source Code Output
HTML Table Tutorial
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

Not all tables require a caption (or a title!). However if the need arises, it’s good to have this option in your back pocket!

Table Headers

Table Headers can be used to define what type of data will be in a certain column or row. They function exactly like the table cell <td></td> tags however to define a table header use the <th></th>. By default this text will appear bold. We will give you two examples using two different ways to use table headings.

Source Code Output
HTML Table Using Vertical Headings
Vertical Heading 1 Vertical Heading 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

 

HTML Table Using Horizontal Headings
Horizontal Row 1 Row 1 Cell 1 Row 1 Cell 2
Horizontal Row 2 Row 2 Cell 1 Row 2 Cell 2

Get in the habit now of using captions and table headings when appropriate as this will only help you down the line with your CSS education.

Formatting your Table

The thing about tables is that each row has to have the same amount of cells. So if you have a row with 3 cells and then a row following it with 4 cells, the row with 3 cells will be formatted as if it had 4 cells. This can be a pain. However, by knowing of a simple attribute we can save you a lot of trouble!

Column Span

Column spans are used to specify how many cells’ a single cell takes up or in other words how many cells the cell spans across. To define a column span, use the attribute colspan = “x” where x equals the amount of cells to span across. If this sounds confusing, this example should clear things up.

Note: the colspan attribute works for both the <td> tag as well as the <th> tag. For this example we will use it in the <th> tag.

Source Code Output
Company Brands
Coca-Cola Coke Sprite
Pepsi Pepsi Sierra Mist

Row Span

Row spans work very much like column spans but instead of defining how many columns to span across, they are use to define (yes you guessed it!) how many rows to span across!

Source Code Output
Company: Coca-Cola
Brands: Coke
Sprite

Cell Padding and Cell Spacing

In HTML Table you can create cell padding and cell spacing to manage the space between table cells.

  • Cell Padding Attribute – defines the spacing between cell border and elements within a cell
  • Cell Spacing Attribute – defines the space between each table cell.

Cell Padding

Source Code Output
Company: Coca-Cola
Brands: Coke
Sprite

Cell Spacing

Source Code Output
Company: Coca-Cola
Brands: Coke
Sprite

Summary

  • <table> tag define a Table.
  • <tr> defines a table row.
  • <td> defines a table data.
  • <th> defines a table heading.
  • <caption> defines a table caption.
  • <colspan> use for multiple columns span.
  • <colspan> use for multiple rows span.

Next Lesson

Our next lesson will be about the HTML Block and Inline Elements. Stay Tuned!

2 COMMENTS

  1. […] and you’ll continue to see them throughout our lessons. We taught you how to create them in Tables Lesson of HTML. Don’t worry, we aren’t going to repeat all that stuff, but let’s […]

Leave a Reply