HTML Tables

81
views
html tables

1Table Tags

html uses <table> attribute to create a table.

2Table Rows, Data and Header

The horizontal line of data is known as table row, defined by <tr> element. ‘tr’ stands for table row.

Now we can insert the data inside this row using <td> element. ‘td’ stands for table data.
It can contain text, images, links, lists, or any sort of data.

In the above code, we have inserted the table data inside the row. See the output-

Now lets add another set of data row so that we can have one more row.

Similarly, we can add an unlimited number of rows of data.

Suppose you want to create a heading for the content type then, use <th> element. ‘th’ stands for table header.

We will insert the header right before the first row of data so that it becomes the topmost row.

Table header appears in bold by default.

3colspan attribute

colspan attribute is used when we want the table cell to span more than one column.

By default every cell has the column span of 1. For example we have set the colspan to 2 in one of the table cell. You can see in the output that the cell now occupies the space of 2 columns.

Toggle the CSS to have a look at the styling of the table. Don’t worry! Everything about CSS will be explained in the CSS lessons.

See the Pen Table with colspan by Sandeep (@sandy432) on CodePen.


4rowspan attribute

rowspan attribute is used when we want the table cell to span more than one row.

By default every cell has the row span of 1. For example we have set the rowspan to 2 in one of the table cell. You will see in the output that the cell now occupies the space of 2 rows.

Try to change the colspan with rowspan in the above example to understand better.

5Table Caption

Use <caption> element to specify the caption of the table.

It must be inserted just after the opening <table> tag.

See the Pen Table with caption by Sandeep (@sandy432) on CodePen.


You can always style the table as desired using CSS properties. In this chapter you have learned the table html only. We will learn to decorate tables in later CSS tutorials.


LEAVE A REPLY

Please enter your comment!
Please enter your name here