Tables

snippet

<html>
<head></head>
<body>
<table>
<tr><td>Row1, Column1</td><td>Row1, Column2</td></tr>
<tr><td>Row2, Column1</td><td>Row2, Column2</td></tr>
</table>
</body>
</html>

Output

Row1, Column1	Row1, Column2
Row2, Column1	Row2, Column2

table border

snippet

<html> 
<head></head> 
<body> 
<table border> 
<tr><td>Row1, Column1</td><td>Row1, Column2</td></tr> 
<tr><td>Row2, Column1</td><td>Row2, Column2</td></tr> 
</table> 
</body> 
</html>

Output

Row1, Column1	Row1, Column2
Row2, Column1	Row2, Column2

table border thickness

snippet

<html> 
<head></head> 
<body> 
<table border="3"> 
<tr><td>Row1, Column1</td><td>Row1, Column2</td></tr> 
<tr><td>Row2, Column1</td><td>Row2, Column2</td></tr> 
</table> 
</body> 
</html>

Output

Row1, Column1	Row1, Column2
Row2, Column1	Row2, Column2

table attributes

frame Attribute

void, above, below, hsides, lhs, rhs vsides, box, border

snippet

 
<html> 
<head></head> 
<body> 
<table border="2" frame="below"> 
<tr><td>Row1, Column1</td><td>Row1, Column2</td></tr> 
<tr><td>Row2, Column1</td><td>Row2, Column2</td></tr> 
</table> 
</body> 
</html>

Output

Row1, Column1	Row1, Column2
Row2, Column1	Row2, Column2

rules Attribute

none, groups, rows, cols, all

snippet

<html> 
<head></head> 
<body> 
<table border rules="rows"> 
<tr><td>Row1, Column1</td><td>Row1, Column2</td></tr> 
<tr><td>Row2, Column1</td><td>Row2, Column2</td></tr> 
</table> 
</body> 
</html>

Output

Row1, Column1	Row1, Column2
Row2, Column1	Row2, Column2

table border color

snippet

 
<html> 
<head></head> 
<body> 
<table border="2" bordercolor="#000fff"> 
<tr><td>Row1, Column1</td><td>Row1, Column2</td></tr> 
<tr><td>Row2, Column1</td><td>Row2, Column2</td></tr> 
</table> 
</body> 
</html>

Output

Row1, Column1	Row1, Column2
Row2, Column1	Row2, Column2

left (default value) center right

table Alignment

snippet

<html> 
<head></head> 
<body> 
Some text 
<table border="1" align="center"> 
<tr><td>Row1, Column1</td><td>Row1, Column2</td></tr> 
<tr><td>Row2, Column1</td><td>Row2, Column2</td></tr> 
</table> 
 
Some text  
<table border="1" align="right"> 
<tr><td>Row1, Column1</td><td>Row1, Column2</td></tr> 
<tr><td>Row2, Column1</td><td>Row2, Column2</td></tr> 
</table> 
</body> 
</html>

Output

Some text

Row1, Column1	Row1, Column2
Row2, Column1	Row2, Column2

Some text

Row1, Column1	Row1, Column2
Row2, Column1	Row2, Column2

cellpadding

snippet

<html> 
<head></head> 
<body> 
Some text 
<table cellpadding="10"> 
<tr><td>Row1, Column1</td><td>Row1, Column2</td></tr> 
<tr><td>Row2, Column1</td><td>Row2, Column2</td></tr> 
</table> 
</body> 
</html>

Output

Some text

Row1, Column1	Row1, Column2
Row2, Column1	Row2, Column2

cellspacing

snippet

 
<html> 
<head></head> 
<body> 
Some text 
<table cellspacing="0"> 
<tr><td>Row1, Column1</td><td>Row1, Column2</td></tr> 
<tr><td>Row2, Column1</td><td>Row2, Column2</td></tr> 
</table> 
</body> 
</html>

Output

Some text

Row1, Column1	Row1, Column2
Row2, Column1	Row2, Column2

table width and height

snippet

<html> 
<head></head> 
<body> 
Some text 
<table width="50%" height="100"> 
<tr><td>Row1, Column1</td><td>Row1, Column2</td></tr> 
<tr><td>Row2, Column1</td><td>Row2, Column2</td></tr> 
</table> 
</body> 
</html>

Output

Some text

Row1, Column1	Row1, Column2
Row2, Column1	Row2, Column2

table background color

snippet

 
<html> 
<head></head> 
<body> 
Some text 
<table bgcolor="ff0000"> 
<tr><td>Row1, Column1</td><td bgcolor="abcdef">Row1, Column2</td></tr> 
<tr><td>Row2, Column1</td><td>Row2, Column2</td></tr> 
</table> 
</body> 
</html>

Output

Some text

Row1, Column1	Row1, Column2
Row2, Column1	Row2, Column2

table background image

snippet

 
<html> 
<head></head> 
<body> 
Some text 
<table border background="xyz.jpg"> 
<tr><td>Row1, Column1</td><td>Row1, Column2</td></tr> 
<tr background="abc.jpg"><td>Row2, Column1</td><td>Row2, Column2</td></tr> 
</table> 
</body> 
</html>

Output

Some text

Row1, Column1	Row1, Column2
Row2, Column1	Row2, Column2

<th> Element

snippet

<html> 
<head></head> 
<body> 
Some text 
<table border> 
<tr><th>Header 1</th><th>Header 2</th></tr> 
<tr><td>Row2, Column1</td><td>Row2, Column2</td></tr> 
</table> 
</body> 
</html>

Output

Some text

Header 1	Header 2
Row2, Column1	Row2, Column2

width and height of a cell

snippet

<html> 
<head></head> 
<body> 
<table border> 
<tr><td width="50">Row1, Column1</td><td width="50%">Row1, Column2</td></tr> 
<tr><td height="25">Row2, Column1</td><td>Row2, Column2</td></tr> 
</table> 
</body> 
</html>

Output

Row1, Column1	Row1, Column2
Row2, Column1	Row2, Column2

alignment

align - left(default), center, right, justify and char valign - top, middle(default), bottom and baseline

snippet

<html> 
<head></head> 
<body> 
<table border> 
<tr><td align="left">Row1, Column1</td><td align="right" valign="bottom">Row1, Column2</td></tr> 
<tr><td align="right" height="50" valign="middle">Row2, Column1</td><td>Row2, Column2</td></tr> 
</table> 
</body> 
</html>

Output

Row1, Column1	Row1, Column2
Row2, Column1	Row2, Column2

colspan attribute

A table is a rectangular grid with rows and columns. The content of a cell can be extended over the content of the adjacent cells using the colspan attributes of the <td> or <th> elements.

The possible values for the colspan attributes are positive integers representing the number of columns or rows occupied by the extended cell.

To extend the cell, only the <td> or <th> element id required to define the content of the cell.

rownspan attribute

A table is a rectangular grid with rows and columns. The content of a cell can be extended over the content of the adjacent cells using the rowspan attributes of the <td> or <th> elements.

The possible values for the rowspan attributes are positive integers representing the number of columns or rows occupied by the extended cell.

To extend the cell, only the <td> or <th> element id required to define the content of the cell.

nowrap attribute

When we need to render text in a cell on a single line, use the nowrap attribute of the <td> or <th> element.

Empty Cells

An empty cell is a <td> or <th> element without any content, By default, browsers do not display a border for these cells. To add a border insert the character sequence as the content. This character sequence is used to insert a blank space.

<caption> element

To add a caption to a table, insert a <caption>..</caption> element inside the <table>..</table> element immediately after the <table> tag. The content of this element can be a short description of the table. The <caption> element accepts the align attribute to set the position of the caption relative to the table.

The possible values are

-bottom -top -left -right

table structure

The content of the table can be divided into sections. The sections are given below.

<thead>..</thead> - to define the head section <tfoot>..</tfoot> - to define the foot section <tbody>..</tbody> - to define the body section

Note

These blocks are include in the <table> block. Each <table> element may have only one <thead> section and one <tfoot> section. The <thead> and <tfoot> blocks must be defined before the <tbody> section. Each of these sections contain regular <tr> elements. These elements accept the attributes like align, bgcolor and valign.

<colgroup> element

To set a common style for all the cells in a column, use the <colgroup>..<colgroup> element. Insert <col> elements describing each column into the <colgroup> block.

Both <colgroup> and <col> elements accept the following attributes to describe a style.

align valign width