Hello, world!

Tables HTML

HTML tables are built to let authors arrange data into rows and columns of cells. In the HTML tutorial you will be taught on how to apply table heading, background, height and width, alignment, caption and others.



HTML Tables

The HTML table element lets the authors to manage data such as text, preformatted text, images, links, forms, form fields, other tables, etc. into rows and columns of cells.
HTML tables are constructed using beginning table tag, <table>, and the ending table table tag, </table>.
Through the <tr> tag, you can divide tables into table rows.
Through the <td> tag, you can divide table rows into table data.
Throughthe <th> tag, you can as well divide a table row into table headings.
The table data <td> are the data containers of the table.

The following tags are the basic structure of an HTML table:
<table> </table> - Table tags
<tr> </tr> - Row tags
<td> </td> - Cell tags

HTML code example html tables:

<table border="1" style="width:50%">
  <tr>
    <td>Apple</td>
    <td>Grapes</td>                        
    <td>Banana</td>
  </tr>
  <tr>
    <td>Cabbage</td>
    <td>Carrots</td>                        
    <td>Eggplant</td>
  </tr>
  <tr>
    <td>Dog</td>
    <td>Cat</td>                                
    <td>Rabbit</td>
  </tr>
</table>

HTML output html tables:

Apple Grapes Banana
Cabbage Carrots Eggplant
Dog Cat Rabbit


Cellpadding and Cellspacing Attributes

The Cellpadding and Cellspacing Attributes allows you to adjust the space in your table cell.
The cellpadding attribute specifies the distance around the content within each cell.
The cellspacing attribute specifies the distance around each cell in the table.

HTML code example cellpadding and cellspacing attributes:

<table border="1" cellpadding="5" cellspacing="5" style="width:50%">
  <tr>
    <th>Fruits</th>
    <th>Vegetables</th>                                
    <th>Animals</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Grapes</td>                        
    <td>Banana</td>
  </tr>
  <tr>
    <td>Cabbage</td>
    <td>Carrots</td>                        
    <td>Eggplant</td>
  </tr>
  <tr>
    <td>Dog</td>
    <td>Cat</td>                                
    <td>Rabbit</td>
  </tr>
</table>

HTML output cellpadding and cellspacing attributes:

Fruits Vegetables Animals
Apple Grapes Banana
Cabbage Carrots Eggplant
Dog Cat Rabbit


Table Heading

The HTML table heading <th> tag allows you to create a header row or column.
Most browsers show table headers in bold text and centered.

HTML code example table heading:

<table border="1" style="width:50%">
  <tr>
    <th>Fruits</th>
    <th>Vegetables</th>                                
    <th>Animals</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Grapes</td>                        
    <td>Banana</td>
  </tr>
  <tr>
    <td>Cabbage</td>
    <td>Carrots</td>                        
    <td>Eggplant</td>
  </tr>
  <tr>
    <td>Dog</td>
    <td>Cat</td>                                
    <td>Rabbit</td>
  </tr>
</table>

HTML output table heading:

Fruits Vegetables Animals
Apple Grapes Banana
Cabbage Carrots Eggplant
Dog Cat Rabbit


Colspan and Rowspan Attributes

You can use the colspan attribute to make a cell span with multiple column.
Same to what colspan is for columns, rowspan allows you to make a cell span with multiple row.
Through the colspan attribute, you can build a cell span more than one column
Through the rowspan attributeyou can build a cell span more than one row

HTML code example colspan and rowspan attributes:

<table border="1">
<tr>
<th>Fruits</th>
<th>Vegetables</th>
<th>Animals</th>
</tr>
<tr><td rowspan="2">Apple </td><td>Cabbage</td><td>Dog</td></tr>
<tr><td>Carrots</td><td>Cat</td></tr>
<tr><td colspan="2">Banana </td><td>Rabbit</td></tr>
</table>

HTML output colspan and rowspan attributes:

Fruits Vegetables Animals
Apple CabbageDog
CarrotsCat
Banana Rabbit


Table Backgrounds

The HTML bgcolor attribute specifies the background colors of the table and its data.
The HTML background  attribute specifies the background image of the table.
You can also specify the border color by using bordercolor attribute.

HTML code example table backgrounds:

<table border="1" bordercolor="blue" background="https://drive.google.com/uc?id=0B3wdKlA6ta9rRzlqa3FFUUViYm8"> ">
 <tr>
    <th>Fruits</th>
    <th>Vegetables</th>                                
    <th>Animals</th>
 </tr>
 <tr>
    <td>Apple</td>
    <td>Grapes</td>                        
    <td>Banana</td>
  </tr>
  <tr>
    <td>Cabbage</td>
    <td>Carrots</td>                        
    <td>Eggplant</td>
  </tr>
  <tr>
    <td>Dog</td>
    <td>Cat</td>                                
    <td>Rabbit</td>
  </tr>
</table>

HTML output table backgrounds:

Fruits Vegetables Animals
Apple Grapes Banana
Cabbage Carrots Eggplant
Dog Cat Rabbit


HTML code example table backgrounds:

<table border="1" bordercolor="blue" bgcolor="green">
  <tr>
    <th>Fruits</th>
    <th>Vegetables</th>                                
    <th>Animals</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Grapes</td>                        
    <td>Banana</td>
  </tr>
  <tr>
    <td>Cabbage</td>
    <td>Carrots</td>                        
    <td>Eggplant</td>
  </tr>
  <tr>
    <td>Dog</td>
    <td>Cat</td>                                
    <td>Rabbit</td>
  </tr>
</table>

HTML output table backgrounds:

Fruits Vegetables Animals
Apple Grapes Banana
Cabbage Carrots Eggplant
Dog Cat Rabbit


Table Height and Width

The HTML width and height attributes allow you to set the table height and width
You can indicate the height and width in terms of pixel and percentage of the existing screen area.

HTML code example table height and width :

<table border="1" width="400" height="300">
 <tr>
    <th>Fruits</th>
    <th>Vegetables</th>                                
    <th>Animals</th>
 </tr>
 <tr>
    <td>Apple</td>
    <td>Grapes</td>                        
    <td>Banana</td>
  </tr>
  <tr>
    <td>Cabbage</td>
    <td>Carrots</td>                        
    <td>Eggplant</td>
  </tr>
  <tr>
    <td>Dog</td>
    <td>Cat</td>                                
    <td>Rabbit</td>
  </tr>
</table>

HTML output table height and width :

Fruits Vegetables Animals
Apple Grapes Banana
Cabbage Carrots Eggplant
Dog Cat Rabbit


Table Caption

The HTML <caption> attribute represents the title or explanation of a table which appears at the top of the table by default.
For the latest version of HTML/XHTML, this tag is depracated.

HTML code example table caption:

<table border="2" width="50%">
<caption>Put Caption Here...</caption>
<tr>
<td>Water</td><td>Air 2</td>
</tr>
<tr>
<td>Earth</td><td>Fire</td>
</tr>
</table>

HTML output table caption:

Put Caption Here...
WaterAir 2
EarthFire


Table Alignment

The table align attribute allows you to align your table to the left/right/center inside table tag depending on the content surrounding it.

HTML code example table alignment:

<table border=1 bgcolor="yellow" width=300 height=100 align=center>
<tr>
<td>Water</td><td>Air 2</td>
</tr>
<tr>
<td>Earth</td><td>Fire</td>
</tr>
</table>

HTML output table alignment:

WaterAir 2
EarthFire


Table Header, Body, and Footer

Tables can be separate into three parts the  header < thead>, body  <tbody> and the footer  <tfoot>.
The < thead>, <tbody> and <tfoot> elements allow you to separate the table into header, footer and body, which are useful when dealing with larger tables.
HTML <thead> tag - Identifies a block of rows representing the head within an HTML Table.
HTML <tbody> tag - Identifies block of rows as the body of its parent <table> element.    
HTML <tfoot> - Identifies block of rows summarizing the columns of the table. The tag represents the footers within an HTML table.

HTML code example table header, body, and footer:

<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the Table Header</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the Table Footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
</tbody>
</table>

HTML output table header, body, and footer:

This is the Table Header
This is the Table Footer
body body body body


Nested Tables

You can create individual tables within another to get the desired layout.
Almost all of the tags can be apply within the table data element <td>.

HTML code example nested tables:

<table border="1" width="100%">
<tr>
<td>
   <table border="1" width="100%">
   <tr>
   <th>Shape</th>
   <th>Number of Sides</th>
   </tr>
   <tr>
   <td>Triangle</td>
   <td>3</td>
   </tr>
   <tr>
   <td>Square</td>
   <td>4</td>
   </tr>
   </table>
</td>
</tr>
</table>

HTML output nested tables:

Shape Number of Sides
Triangle 3
Square 4