HTML | Tables

html tables

HTML tables are very basic but can be very powerful when used correctly. At their base level, tables can organize data into rows and columns.

The table definition itself is defined and delimited by <table> tags Rows of data are defined and delimited by <tr> (table row) tags.Table cells (individual pieces of data) are defined and delimited by <td> (table data) tags.Alternatively, <th> tags can be used for cells in header rows. Table cells, when stacked in even rows, create table columns.

<DOCTYPE HTML—

<table border=”2px”>
<tr>
<th>Cars</th>
<th>Car Type </th>
</tr>
<tr>
<td>Flat Panda</td>
<td>Sports </td>
</tr>
<tr>
<td>Ford Fiesta </td>
<td> Luxury</td>
</tr>
</table>

</html>

The <table> element can carry the following deprecated attributes:

  • align
  • bgcolor
  • border
  • cellpadding
  • cellspacing
  • dir
  • frame
  • rules
  • summary
  • width

The cellspacing  attribute is used to create a space between the borders of each cell.

The cellpadding  attribute is used to create a gap between the edges of a cell and its contents.

The frame attribute is supposed to control the appearance of the outermost border of the whole table, referred to here as its frame , with greater control than the border attribute.

The rules attribute is used to indicate which inner borders of the table should be displayed.

    <table dir=”rtl” border=”3px” cellpadding=”2px” cellspacing=”5px”>
<tr>
<th> Car</th>
<th> Car Type</th>
</tr>
</table>

The  <caption> element appears directly after the opening <table> tag; it should come before the first row.By using a <caption> element, rather than just describing the purpose of the table in a previous or subsequent paragraph, you are directly associating the content of the table with this description – and this association can be used by screen readers and by applications that process web pages (such as search engines).

    <table width=”20%”>
<caption> Table Describes the car type</caption>
<tr>
<td>car</td>
<td>cartype</td>
</tr>
</table>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s