Responsive Tables in HTML5 for Beginners

The accepted purpose of tables is to present data in rows and columns on a web page.

There was a time when tables were used to structure webpages.

With improvements in CSS and the way browsers handle it, the practice is no longer necessary.

Learn to structure your web pages the right way using divisions and CSS.

Use tables for presenting data on your pages.

Basic Table Tags

<table></table>Table
<tr></tr>Table Row
<th></th>Table Heading Cell or Column
<td></td> Table Data Cell or Column

Note: We present only the most basic tags for beginners. If you want to build very sophisticated tables you should consult other sources for additional information.

This is the basic code for the following table: (single row - 2 column)

<table style="max-width:50%; border: solid 1px #000000; margin: 0 auto";>
<tr>
<td>Column One</td>
<td>Column Two</td>
</tr></table>

 

Column One

Column Two

Closing tags are required for all table related tags.

Beginners should also avoid nesting tables. (Building a table within a table.)

All table structures begin with the table tag. Remember the closing tag.

Row Tag

The <tr> or row tag is used to define rows in a table. Do not omit the closing tag.

A row can contain numerous cells defined by the <th> and <td> tags.

Table Heading Tag

 <th>

Column headings are placed in a separate row above the associated row of data cells.

<tr><th>Column 1</th><th>Column 2</th></tr>

Table Data Tag

The <td> tag is used to define the cells in a row that contain actual data.

The attributes of the td ,th tag are:

Column Heading <th></th>

colspan ; rowspan

Column Data <td></td>

colspan ; rowspan

Horizontal alignment.

text-align: left, right, center

Vertical alignment.

vertical-align : top, middle, bottom

 

Note: There are other table tags that could be presented here. Learn these to get a basic understanding of how tables work. Later on you can add the other tags to your library of knowledge. If you are already beyond the level of learning given here we have compiled a collection of really great tuorials and reference sites that may give you what you need. Check Them Out.

<table style="max-width: 50%; border : solid 1px #000000; margin: 0 auto">
<tr>
<td  style="text-align:center;padding: 2px 2px">Column One</td>
<td  style="text-align:center;padding: 2px 2px">Column Two</td>
</tr></table>

 

Column 1	Column 2
Column One Data	Column Two Data

 

Making Tables Responsive

For very small tables use the techniques displayed in our Tables and Color and Tables and Background Images pages.

For large data filled tables like the one shown below check out our Beginners Solution demo which displays a table with actual data and includes the CSS and HTML code used to build it.

 

Free Tools and Resources

Have you tried our FREE RWD template kit? Download Template #402 - 6 Page Kit