HTML Tables

This tag is used to display the data in tabular format. A table is combination of rows. Each row is combination of cells (columns). Each row can contain different no of cells

Attributes of table tag:

  1. <table>: This attribute specifies the thickness of the border. It is specified in pixels the default value is “0” pixels.
    <table> cells(columns)
  2. <width>: This attribute specifies the width of the table.
  3. <height>: This attribute specifies the height of table.
    Note: Width and height can be specified in pixels or percentage
  4. align: This attribute is used to align the table in the web page
    align= left/center/right
    The default alignment of table is left.
  5. Border color: This attributes specifies color for a border of a table
  6. Bgcolor: This attribute specifies the background color for a table
  7. Background: This specified the image as the background to the table.
  8. Cell Padding: This specifies an empty space cell content and cell border.
  9. Cell Spacing: This attribute specifies an empty space between table border and cell border and between the cells

Sub tags of <table>:

  • <tr> (table row): This tag is used to create a row in a table.
    The number of tr tags indicates the number of row in a table
  • <td> (table data): This tag is used to create access in a particular row.
    The number of td tags indicates number of cells or columns in that row.
  • <th> (table heading): This tag is used to create a cell in a row similar to td tag but <th> will align the text to be the center of the cell and the text will be displayed in bold face.
  • <caption>: This tag is used to display an heading to the table.

Attributes of Sub Tags:

  1. Row Span: This is used to spam (merge) multiple cells into a single cell vertically.
  2. Col Span: This attribute is used to spam the (merge) multiple cells into a single cell horizontally.
  3. Vertical Align (valign):This attribute is used to align the text in a cell vertically.
    valign= top/middle/bottom
    default value is middle
    In addition to above attributes we cam also use align, bgcolor, background, width, height.

Example :
<title> Using Tables </title>
<table border= 2 width= 400 height= 400 border color= red background= “Smile.jpeg” align= center cellpadding= 20 cellspacing= 20>
<caption> Number Table </caption>
<th> one </th>
<th> two </th>
<th> three </th>
</tr >
<td colspan= 2> four </td>
<td rowspan= 2> five </td>
<td align= center valign= top> six </td>
<td> seven </td>

Leave a Reply

Your email address will not be published. Required fields are marked *