HTML Table attributes and elements

Table Tag:
The <table> tag defines an HTML table.
An HTML table consists of the <table> element and one or more <tr><th>, and <td> elements.
The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

COLSPAN AND ROWSPAN:

Creating a cell that “spans” across a number of columns or rows is possible using the COLSPAN and the ROWSPAN properties in a TD (or TH) tag.
These two properties can be a bit confusing, so I’ll start off with a simple 2 row 2 column table.

<table>
<tr>
<td>
row 1 cell 1
</td>
<td>
row 1 cell 2
</td>
</tr>
<tr>
<td>
row 2 cell 1
</td>
<td>
row 2 cell 2
</td>
</tr>
</table>
row 1 cell 1. row 1 cell 2
row 2 cell 1 row 2 cell 2

COLSPAN creates a cell that “spans” across a number of cells in a row. This makes the cell longer across, not down, since it is crossing COLumns, not ROWs.

<table>
<tr>
<td>
row 1 cell 1
</td>
<td>
row 1 cell 2
</td>
</tr>
<tr>
<td colspan=”2>
row 2 cell 1
</td>
</tr>
</table>
row 1 cell 1. row 1 cell 2
row 2 cell 1

ROWSPAN is very similar to COLSPAN, but it works in the opposite direction. While COLSPAN goes across columns, ROWSPAN goes across rows. Taking the simple 2 row 2 column table from above, here is an example with ROWSPAN in place.

<table>
<tr>
<td rowspan=”2>
row 1 cell 1
</td>
<td>
row 1 cell 2
</td>
</tr>
<tr>
<td>
row 2 cell 2
</td>
</tr>
</table>
row 1 cell 1 row 1 cell 2
row 2 cell 2

CELLSPACING:

It is a attribute of Table tag. We use cellspacing attribute to set the space among the cells of table.

CELLPADING:
It is also a attribute of Table tag. We use it to set the space between cell wall and cell text.

Note : There are also  many attribute of table tag like border, BGcolor(background color),Frame ,rules ,width etc.

Example:

<TABLE BORDER=1 CELLPADDING=2 CELLSPACING=3>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</TABLE>

DIV Tag:

The <div> tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections. Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once. For instance, by wrapping a set of paragraph elements into a <div> element, the developer can take advantage of CSS styles and apply a font to all paragraphs at once by applying a font style to the <div> tag instead of coding the same style for each paragraph elements.

 Example:

<div id="myDiv" name="myDiv" title="Example Div Element">
  <h5>Subtitle</h5>
  <p>This paragraph would be your content paragraph...</p>
  <p>Here's another content article right here.</p>
</div>

 

Comments are closed.