Tables

Tables

Introduction

If you want to display information of some type, like displaying your time table of class, Report Card or want to display information in the form of the tables. Then the Table elements of the HTML is used to display the information in the table form. Now you can do this easily or how easily you can display your information using tables. Information in the table can be displayed in the form of like.

S.No. Name Class Age Address 1 Arun Kumar 12th 20 xyz 2 Neeraj Kumar 10th 18 abc

Tables are the simplest form of displaying the data/ information. Using tables we can display the information very easily to the user. Due to its Simplicity in almost all the projects data is displayed using the tables. Project may be made using any application. But most of them uses only tables to display the information.

In all most all of the database driven websites we uses the tables to display the information. So tables are very important part of the HTML. And you must learn them nicely.

Table Tags

Tag Description <table> Defines a table <th> Defines a table header <tr> Defines a table row <td> Defines a table cell <caption> Defines a table caption <thead> Defines a table head <tbody> Defines a table body

The <table> tags

The <table> tag defines a table. Inside a <table> tag you can put table headers, table rows, table cells and other tables

Format:

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

Attributes

Tags Attribute Value Description <table> align left,center,right Aligns the table. Deprecated. Use styles instead. bgcolor rgb(x,x,x),#xxxxxx, colorname Specifies the background color of the table. Deprecated. Use styles instead. border pixels (0-n) Specifies the border width. Tip: Set border="0" to display tables with no borders! cellpadding pixels, % Specifies the space between the cell walls and contents cellspacing pixels, % Specifies the space between cells width pixels, % Specifies the width of the table

Align

This attribute can have the value center, left, right. By using this table can be aligned on the page.

Bgcolor

bgcolor is used to give the background color to the table. It can have the values in the three type, rgb (x,x,x) combination, #xxxxxx (color code), or color name.

Border

border attribute of the table is used to provide the border style to the table. Its value is given in pixels (0-n). Above table has border="5".

if you want your table should not have border then define border="0".

Width

It specifies the width of the table. Its value is also given in pixels (0-n) or %.

Cellpadding

It specifies the space between the cell walls and contents. Its value is also given in pixels (0-n) or %.

Cellspacing

It specifies the space between the cells. Its value is also given in pixels (0-n) or %.

<th> <tr> and <td>Tag

<th> tag

Defines a table header cell in a table. The text within the th element usually renders in bold.

Format:

<th> this is the header </th>

<tr> tag

<tr> tag defines a row in a table.

Format:

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

<td> tag

<td> tag defines the table data. This tag is used inside the <tr> tag.

Format:

<td> table data </td>

The next table defines the different attributes that can be used by <th>,<tr> and <td> tags.

Tags Attribute Value Description <th>,<td>,<tr> align left,center,right Specifies the horizontal alignment. <th>,<td>,<tr> bgcolor rgb(x,x,x),#xxxxxx, colorname Specifies the background color of the table. Deprecated. Use styles instead. <th>,<td> colspan Number Indicates the number of columns this cell should span <th>,<td> rowspan Number Indicates the number of rows this cell should span <th>,<td>,<tr> height Pixels Specifies the height of the table cell. Deprecated. Use styles instead. <th>,<td>,<tr> Valign top,middle,bottom, baseline Specifies the vertical alignment of cell content <th>,<td> width pixels % Specifies the width of the table cell. Deprecated. Use styles instead.

<caption> Tag

<caption> tag defines a table caption.

Format:

<caption>This is a caption</caption>

<thead>,<tbody> and <tfoot> tag

The thead, tfoot and tbody elements enables you to group rows in a table. When you create a table, you might want to have a header row, some rows with data, and a row with totals at bottom. This division enables browsers to support scrolling of table bodies independently of the table header and footer. When long tables are printed, the table header and footer information may be repeated on each page that contains table data.

Example for <thead>,<tbody>and <tfoot>

Example Output <table border = "1"> <thead> <tr> <td>This text is in the THEAD</td> </tr> </thead> <tfoot> <tr> <td>This text is in the TFOOT</td> </tr> </tfoot> <tbody> <tr> <td> This text is in the TBODY</td> </tr> </tbody> </table> This text is in the THEAD This text is in the TFOOT This text is in the TBODY

Attributes of <thead>,<tbody> and <tfoot>

Attribute Value Description> align right,left,center,justify char Defines the text alignment in cells. Valign top,middle,bottom,baseline Specifies the vertical text alignment in cells.

so now lets do some Practical.

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

How to Create Table

Example:

<html> <head> <title>tables</title> </head> <body> <b>Table with border=1 cellspacing=1 cellpading=1 with one empty cell. </b><table border="1" cellspacing="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td> </td> </tr> </table> <br> <b>Table with border=1 cellspacing=1 cellpading=10 bgcolor=lightyellow</b> <table border="1" cellspacing="1" cellpadding="10" bgcolor="lightyellow"> <tr> <th>Heading</th> <th>Another Heading</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><br><b> Table with border=8 cellspacing=8 cellpading=1&nbsp; bgcolor=lightblue bgcolor=lightgreen</b> <table border="8" cellspacing="8"> <tr> <th bgcolor="lightblue">Heading</th> <th bgcolor="lightgreen">Another Heading</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> <p> </p> </body> <html>

Your above web page in the web browser looks like:

Example on the colspan and rowspan

Here you can see what the colspan and rowspan do.

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks.

Example:

<html> <body> This table has a caption,and a thick border,<h4>Cell that spans two columns:</h4> <table border="6"> <caption>My Caption</caption> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>XYZ</td> <td>011 273 994</td> <td>011 274 465</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>XYZ</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>011 273 994</td> </tr> <tr> <td>011 274 465</td> </tr> </table> </body> </html>

Your above web page in the web browser looks like: