Friday, March 10, 2017

Tables in HTML



Tables:

   Tables are very efficient means displaying information very clearly.
-Instead of writing several pages of explanation a table can effectively give all necessary information.
-A table in html allows organizing information in a row and column format.
<table>
   The table tag (<table>) indicates the starting of a table.
<tr>
   The Table row tag is used to create the table row.
<th>
   By this Table heading tag we can provide headings to the different columns.
<td>
   By using Table Data tag we can provide the table data.

Example:

<html>
<head><title>table</title></head>
<body>
<table  border="3">
<tr>
<th>Name</th>
<th>Group</th>
</tr>
<tr>
<td>Dollar</td>
<td>MCA</td>
</tr>
<tr>
<td>Manikanta</td>
<td>MBA</td>
</tr>
</table>
</body>
</html>

Output:


Attributes Available In Table tag:
1. Border
2. Align
3. bgcolor
4. cellspacing
5. cellpadding
6. Colspan
7. Rowspan

Border:
   This attribute can be used to give the thickness of the border of table. Without border tag the table border is not displayed.
Example:  <table border=”10”>

Align:
By using align attribute we can mention the position of table, that is left, right, top, bottom, center.
Example: <table align=”left”>

bgcolor:
By using bgcolor attribute we can change the background color for the table or just one cell.
Example:  <table bgcolor=”00ff00”>

background:
  background attribute is used to set the background image for table or just one cell
Example: <table background=”sunset.jpg”>

cellpadding:
cellpadding attribute represents the distance between cell borders and the content within a cell.
Example: <table cellpadding=”6”>

cellspacing:
The cellspacing attribute defines the width of the border.
Example: <table cellspacing=”5”>

Colspan:
You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.
The colspan attribute is used to merge the two or more columns into a single column.
Syntax: <td colspan=”Number of columns”>

Rowspan:
 The rowspan attribute is used to merge the two or more rows into a single row.
Syntax: <td rowspan=”Number of rows”>

Example:
<html>
<head><title>table</title></head>
<body>
<table align="center" border="3" bgcolor="blue" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Group</th>
<th>Address</th>
</tr>
<tr>
<td rowspan="2">Dollar</td>
<td>MCA</td>
<td>DMM</td>
</tr>
<tr>
<td>MBA</td>
<td>ATP</td>
</tr>
<tr><td colspan="3">omgmca.blogsport.in</td></tr>
</table>
</body>
</html>


No comments:

Post a Comment