Servage Magazine

The following article discusses the basics of creating a simple table using HTML codes.

We’ll start out by reviewing how tables should be used, then learn the elements used to create them with mark-up. Remember, this is a tutorial in HTML, so we’re going to focus on the mark-up that structures the content into tables, and we won’t be concerned with how the tables look. Like any web content, the appearance of tables should be handled with cascading style sheets.

Purpose of using Tables

HTML tables were, in fact, created for instances when you need to add tabular material (data arranged into rows and columns) to a web page. Tables may be used to organize calendars, schedules, statistics, or other types of information. Note that ‘data’ doesn’t necessarily mean numbers. A table cell may contain any sort of information, including numbers, text elements, and even images and multimedia objects.

The sample table shown below is an example to demonstrate the usage of HTML in table creation.

In visual browsers, the arrangement of data in rows and columns gives readers an instant understanding of the relationships between data cells and their respective header labels. In the days before cascading style sheets, tables were the only option for creating multicolumn layouts or controlling alignment and whitespace.

General Syntax

<table></table> (Table Content)
<tr></tr>       (Table Row)
<th></th>       (Table Header)
<td></td>       (Table Data)

Let’s take a look at another simple table to see what it’s made of. Here is a small table with three rows and three columns that lists stock details of a hardware shop.

Syntax

<table>
  <tr>
    <th>S No.</th>
    <th>Item</th>
    <th>Quantity (g)</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Keyboard</td>
    <td>7</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Mouse</td>
    <td>15</td>
  </tr>
</table>

Output

The above image reveals the structure of the table according to the HTML table model. There are no ‘visible’ rows or columns between different data. HTML is capable of producing just ordinary tables like the one mentioned above. In order to make it attractive and striking, we need the knowledge of Cascading Style Sheets (CSS).

Spanning Cells

One fundamental feature of table structure is cell spanning, which is the stretching of a cell to cover several rows or columns. Spanning cells allows you to create complex table structures, but it has the side effect of making the markup a little more difficult to keep track of. You make a header or data cell span by adding the colspan or rowspan attributes, as we’ll discuss next.

Column spans

Column spans, created with the colspan attribute in the td or th element, stretch a cell to the right to span over the subsequent columns. Here a column span is used to make a header apply to two columns.

Syntax

<table>
  <tr>
    <th colspan="2">Top Softwares</th>
  </tr>
  <tr>
    <td>Adobe After Effects</td>
    <td>Microsoft Office</td>
  </tr>
</table>

Output

Notice in the first row (tr) that there is only one th element, while the second row has two td elements. The th for the column that was spanned over is no longer in the source; the cell with the colspan stands in for it. Every row should have the same number of cells or equivalent colspan values. For example, there are two td elements and the colspan value is 2, so the implied number of columns in each row is equal.

Row spans 

Row spans, created with the rowspan attribute, work just like column spans, but they cause the cell to span downward over several rows. In this example, the first cell in the table spans down three rows.

Syntax

<table>
  <tr>
    <th rowspan="3">Top Softwares</th>
    <td>Microsoft Office</td>
  </tr>
  <tr>
    <td>Adobe After Effects</td>
  </tr>
  <tr>
    <td>Adobe Dreamweaver</td>
  </tr>
</table>

Output

Again, notice that the td elements for the cells that were spanned over (the first cells in the remaining rows) do not appear in the source. The rowspan=”3″ implies cells for the subsequent two rows, so no td elements are needed.

References & further reading

The below mentioned links provide some additional knowledge concerned with the creation of table in HTML.

• http://www.w3schools.com/html/html_tables.asp

• http://www.webmonkey.com/2010/02/create_simple_html_tables/

• www.w3.org/TR/html5

• www.webaim.org/techniques/tables