Defining a table structure in HTML

To better align or arrange content, HTML offers a table structure. Creating a table in HTML is very simple if you keep in mind that you have to create one row at a time and create one column at a time for each row. See the HTML table code generator tool to create HTML code for a desired table. Let's suppose you need a table with one row and two columns. To create a such table in HTML, first you would write an HTML instruction that will start the table; next, you will write the instruction that will create the row. Then, you will create the first column; finally, then the last column.

So let's cover the HTML tags that will create a table. To define a table, we start with the <table> tag. Next for each row, use the <tr> tag. The "tr" in <tr> tag stands for table row. For each column in each row, use the <td> tag, the "td" in <td> stands for table data. Let's say we want to create the following table :

Col 1 Col 2

To create the top table, use the following code :

<table width="190" border="1">
<td>Col 1</td>
<td>Col 2</td>

In the first line above, our first tag starts our table. In the table tag, we have two attributes. The first attribute width specifies that the width of this table is 190 pixels. The second attribute, border specifies to use a border thickness of 1 pixel. With the second line, <tr>, we start our first row. The third line creates our first column with the <td> tag. Any content you want to display as a table must be placed inside the <td> (or <th> tag, as discussed below) tag. Just like the first column we created, we create the second column with the <td> tag. The fifth line ends our row and the table ends with the last line.

When you create a table, you normally change many default properties of the table. You may, for instance, change the background color of the table. The following pages discuss some of the common changed properties of table: