Scribd
Upload
86 views

Tables HTML

This document contains the tutorial on tables in HTML.

Uploaded by

Sourabh Bhandari
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
86 views

Tables HTML

This document contains the tutorial on tables in HTML.

Uploaded by

Sourabh Bhandari
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

TABLES

The table is a element that consists of rows and columns. It is useful for displaying data
in tabular form, however it is used as the foundation of complex of layouts with multiple
columns, sidebars and many other features. One of the beautiful thing about tables is that
they can be used to create liquid design that can contract and expand proportionally to
the visitor's browser. There three set of tags required to build any table i.e <table>
(table), <tr> (row), <td> (cell). The general syntax for creating table is as :

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Let us demonstrate the code to create tables :

<html>
<head>
<title>Tables</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>

<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>

<tr>
<td>7</td>
<td>8</td>

© Copyright Sourabh Bhandari http://sourabhandari.in


<td>9</td>
</tr>
</table>
</body>
</html>

Adding a border to the table


You can add border to your table. The border of table is influenced by four attributes :
border, cellpadding, cellspacing, color as :

<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="2>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>

<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>

<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>

The thickness of internal borders between the cells is controlled by cellspacing attribute
as :

© Copyright Sourabh Bhandari http://sourabhandari.in


<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="2" cellspacing="10">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>

<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>

<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>

The empty spaces between the cell borders and content inside it is controlled by
cellpadding attribute as :

<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="2" cellspacing="10" cellpadding="10">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>

© Copyright Sourabh Bhandari http://sourabhandari.in


</tr>

<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>

<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>

The color of the border of the table can be specified with bordercolor attribute. Let us
see as :

<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="2" cellspacing="10" cellpadding="10" bordercolor="#ff0099">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>

<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>

<tr>
<td>7</td>

© Copyright Sourabh Bhandari http://sourabhandari.in


<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>

Setting the dimensions of the table


The dimensions ie width and height of <table> , <tr>, <td> can be specified with the
help of attribute width and height. The width or height can be set to the pixel value ot
percentage. Let us see the code below :

<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="2" width="70%" height="200">
<tr height="70">
<td width="30%">1</td>
<td>2</td>
<td>3</td>
</tr>

<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>

<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>

Table alignment

© Copyright Sourabh Bhandari http://sourabhandari.in


The align attribute of the <table> tag can be used to control the alignment of table.
Similarly the align attribute of the <td> tag is used to align the content of the cell. The
value of align attribute can be left, right or center. To align the content of the cell or row
vertically, define the value of valign attribute equal to top, middle,bottom, baseline. Let
us see the code below :

<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="2" width="70%" height="200" align="right">
<tr height="70">
<td width="30%" align="left" valign="bottom">1</td>
<td>2</td>
<td>3</td>
</tr>

<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>

<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>

Cell spanning
A single cell can span across multiple rows or columns. The number of rows or columns
a cell spans is specified using the rowspan and colspan attribute. Let us demonstrate it
:

<html>
<head>

© Copyright Sourabh Bhandari http://sourabhandari.in


<title>Tables</title>
</head>
<body>
<table border="2" width="70%" height="200" align="right">
<tr height="70">
<td colspan="3">1</td>
</tr>

<tr>
<td>2</td>
<td>3</td>
<td rowspan="2">4</td>
</tr>

<tr>
<td>5</td>
<td>6</td>
</tr>

</table>
</body>
</html>

Table background properties


The background and bgcolor attribute specifies the background image and background
color. These attributes are supported by all the table tags viz. <table>, <tr> and <td>. Let
us demonstrate it :

<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="2" width="70%" height="200" align="right" bgcolor="#FF6688">
<tr height="70">
<td>1</td>
<td bgcolor="#0099FF">2</td>
</tr>

<tr>

© Copyright Sourabh Bhandari http://sourabhandari.in


<td background="rup.jpg">3</td>
<td>4</td>
</tr>

<tr>
<td>5</td>
<td>6</td>
</tr>

</table>
</body>
</html>

© Copyright Sourabh Bhandari http://sourabhandari.in

You might also like