HTML Tables

HTML table represents data in the form of rows and columns of a table (i.e. in 2-D form). We use the tables to organize the data in a manner.

table

It defines a table to organize the data in 2-D form. It contains the basic unit cells called data cells.

<table>
 <tr>
  <td>Name</td> <td>Salary</td>
 </tr>
</table>
Try </>

border="1" attribute sets the border of table, td and tr elements. The border may also be specified by CSS properties.

tr

This tag represents the table row that contains one or more data cells. It may also be called as the cells container.

<table>
 <tr> 
  <td>data container</td> <td>data container</td>
 </tr>
</table>

td

This tag represents a discrete cell in a table row. td stands for table data i.e. a cell that contains the data.

<tr>
  <td>Name</td>
</tr>

th

It is the same as table data (td) but the content inside this cell is bold and is centered automatically. It is used for heading purposes in a table.

<tr>
  <th>Name</th>
  <th>Salary</th>
</tr>
Try </>

We have learnt how to make a table. Next, we learn how to design a table to make it more attractive.

Span attributes

rowspan attribute

rowspan attribute allows a single cell to contain more than one rows. In other words, two cells of two rows are merged to form one cell.

See the example below.

<tr>
  <td rowspan="2">Name</td>
  <td>way1</td>
  <td>way2</td>
</tr>

Try </>

The integer value (1,2,3,4,5....) defines the number of rows to span. In the above example, a cell contains or spans two rows because the value of rowspan attribute is 2

colspan attribute

colspan attribute allows a cell to contain more than columns. Two cells are merged to contain one column.

See the example below.

<tr>
  <td>Name</td>
  <td colspan="2">Telephone</td>
</tr>

Try </>

The integer value represents the number of columns to span. In the above example, a single cell spans two cells.

thead, tbody and tfoot may also be used to build a table. thead element contains the table headings. tbody element contains the table data. tfoot element contains the summary of the data.

Stylish table

We use CSS properties to design the table.

border:1px;

Border may also be specified by border property.

border-collapse:collapse;

collapse property collapses the borders of table, td, th.

padding

The data cells are not wide and represent a narrow look. padding property widens the area between content and border.

If you want to learn how to style a table then click on the link css table.