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, Column1Row1, Column2
Row2, Column1Row2, 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, Column1Row1, Column2
Row2, Column1Row2, 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, Column1Row1, Column2
Row2, Column1Row2, 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, Column1Row1, Column2
Row2, Column1Row2, 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, Column1Row1, Column2
Row2, Column1Row2, 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, Column1Row1, Column2
Row2, Column1Row2, 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, Column1Row1, Column2
Row2, Column1Row2, Column2
Some text
Row1, Column1Row1, Column2
Row2, Column1Row2, 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, Column1Row1, Column2
Row2, Column1Row2, 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, Column1Row1, Column2
Row2, Column1Row2, 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, Column1Row1, Column2
Row2, Column1Row2, 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, Column1Row1, Column2
Row2, Column1Row2, 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, Column1Row1, Column2
Row2, Column1Row2, 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 1Header 2
Row2, Column1Row2, 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, Column1Row1, Column2
Row2, Column1Row2, 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, Column1Row1, Column2
Row2, Column1Row2, 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

Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents