Creating Tables in HTML: Purpose, Syntax & Examples

Instructor: Olu Adesida
In this lesson, you will learn how tables are created in HTML and what they are useful for. The lesson will also explain why tables are not recommended for full page layout. It will also introduce an alternative method of creating layout-friendly HTML tables.

Overview

In Hypertext Markup language (HTML), tables allow web authors to arrange data such as text, images and links to other content into rows and columns. Tables present data in such a way that the viewer can look up values which indicate connections between the different types of data, for example, the bus fare chart for trips between a number of cities in the USA.

Figure 1: Example of an HTML table
bus-schedule-example

HTML Table basics

In HTML, a table is created by using the <table> element, with the <tr> and <td> elements. The <table> creates the shell of a table, while the <tr> and <td> elements create the rows and columns, respectively. The <th> element is used to create headers. A set of <table> and </table> opening and closing tags respectively are required to create the table shell.

Table headers

A set of <th> and </th> opening and closing tags respectively are required to create table headers.

Table Rows

A set of <tr> and </tr> opening and closing tags respectively are required to create a row.

Table Columns

A set of <td> and </td> opening and closing tags respectively are required to create a column.

Below is an example of a table which used is to present tabular bus fare chart data:

<html>
 <table border='1'>
   <tr>
    <th>From</th>
    <th>To</th>
    <th>Date</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Chicago</td>
    <td>New York</td>
    <td>Tuesday 1/8</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>Chicago</td>
    <td>Denver</td>
    <td>Saturday 2/9</td>
    <td>$60</td>
  </tr>
 </table>
</html>


Figure 2 - Table of Bus Fare Chart
HTML-Table


Lets's get creative

In creating tables, we can do several things to improve the layout such as:

  • Define the thickness of the border
  • Merge columns
  • Define the width of a cell
  • Add colors to cell backgrounds
<html>
<body>
<table border='1' cellpadding='5' cellspacing='5'>
  <tr>
    <th>From</th>
    <th>To</th>
    <th>Date</th>
    <th>Price</th>
  </tr>
  <tr>
    <td colspan='2'>Chicago</td>
    <td>New York</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>Chicago</td>
    <td>Denver</td>
    <td>Saturday 2/9</td>
    <td bgcolor='#FF0000'>$60</td>
  </tr>
</table>
</body>
</html>

In the code above:

  • cellspacing is the space between the adjacent cells i.e. the margin around the cells
  • cellpadding is the padding around the cell content i.e. the space inside cells,between the cell border.
  • colspan allows content to span several columns i.e. 2 columns in our example.
  • bgcolor defines a cell's background color.


Figure 3 - Table of Bus Fare Chart with Additional Formatting
HTML-Table2


HTML tables may not always be advisable

Despite being useful for presenting tabular data in web pages, more current versions of HTML i.e. HTML 4.01 and HTML 5 do not recommend tables for layouts because:

  • When used as layout documents, tables may not render correctly to non-visual media i.e. screen readers, making it difficult for visually impaired users to navigate pages.
  • the table code could become harder to maintain since table layouts involve more complex HTML structures.
  • tables, especially nested (one or more tables placed in another table) ones could take longer to load on a web page.
  • table created layout can hurt search engine optimization (SEO). Since search engines place a higher rating on content at the top of a web page i.e. navigation, thus placing a much lower rating on the table data.
  • tables are not automatically responsive since they are sized according to their content. Viewing HTML table layouts on mobile devises will look like Figure 4 (below) and will require back-and-forth side swiping and device flipping to view it.


Figure 4 - HTML table layout on mobile
html-table-layout-on-mobile


To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 160 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create An Account
Support