How to Create a Table In HTML

In this article, we show how to create a table in HTML.

Below is a table in HTML which is very common on the web.

Contact Information

Name	Email Address	Address
John Peters	JPeters@gmail.com	Miami, Florida
Michael Smith	Michaelsmith@yahoo.com	Lincoln, Nebraska
Wiliam Scott	WScott@msn.com	Beverly Hills, California

In order to create a table, first you list the columns that are in the table. This is done with the th tag, which is the table header tag. Once you specify all the columns that the table has, you then list the data that are in each of the rows. To list the rows, you use the td tag with an opening and closing tr tag. The amount of td tags should be equal to the amount of columns that are in the table. So in the above table example, there are 3 columns created, so when creating a row, you must list three boxes of data, one for each column.

Coding

To create the table shown above, the HTML code is shown below.

<h1>Contact Information</h1> <table border="1"> <tr> <th>Name</th> <th>Email Address</th> <th>Address</th> </tr> <tr> <td>John Peters</td> <td>JPeters@gmail.com</td> <td>Miami, Florida</td> </tr> <tr> <td>Michael Smith</td> <td>Michaelsmith@yahoo.com</td> <td>Lincoln, Nebraska</td> </tr> <tr> <td>Wiliam Scott</td> <td>WScott@msn.com</td> <td>Beverly Hills, California</td> </tr> </table>

Formal Elements To Create a Table
Opening and closing table tags- The table tags define the entire table. These tags enclose the tr, th, and td tags.

Opening and closing tr tags- The tr tag stands for table row. It forms all the rows of a table including the table header row, in this case, which is "Name", "Email Address", and "Address", along with all the data rows, such as each of the people with their respective names, email addresses, and address.

Opening and closing th tags- The th tag stands for table header. This creates the first row of a table which in this case, is the row containing, "Name", "Email Address", and "Address" horizontally across. This table header tag creates the title of each of the columns of a table. If you don't want separate header rows, you can opt to just use <td> tags.

Opening and closing td tags- The td tag stands for table data. This tag is used to create each of the rows underneath the table header row, or columns. The td tag is always enclosed by the tr tag, since it is data representing one of the rows of a table.

By default, tables don't show their borders. If you want to see basic tale borders, you can turn on the table's border attribute. This is done by the line below:

<table border="1">

This tag creates a table and specifies that it will have a border of size 1. If you leave out the border= "1", some browsers will display a border and some won't. You can set the order value to 0 or to a larger number. The larger the number, the bigger or thicker the border will be.