• Have Any Question?
  • contact@eitworld.com

HTML Tables





Table Tag In Html is used to create table. Inside <table> tag you have to use other tags like <tr> tag for creating a row, <th> tag for table heading, <td> tag for table data and other tags for tables you can learn from eitworld.com in easy way. The example for creating table is follows:

<table>
<tr>
<td>Hello world</td>
<td>eitworld</td>
</tr>
</table>

The output is as follows:

Hello world eitworld
  • <table> tag is used to create a table in html.
  • <tr> tag is used to create a row in table.
  • <td> tag is used to create a column in a row.
  • <th> tag is used to create a heading of a column.
  • All these tags are in pair.

Example

<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Student Name</th>
<th>Roll Number</th>
</tr>
<tr>
<td>Alen</td>
<td>01</td>
</tr>
<tr>
<td>Bostra</td>
<td>10</td>
</tr>
<tr>
<td>Diago</td>
<td>21</td>
</table>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Html Table : The border Attribute

 

  • We saw in previous topic that normally the table is created without border.
  • So to show its border, border attribute is used. It takes the size of the border as its value.
  • To define a different color of border than black, bordercolor attribute is used.

Example

<!DOCTYPE html>
<html>
<body>
<table border=”4″ bordercolor=”red”>
<tr>
<th>Student Name</th>
<th>Roll Number</th>
</tr>
<tr>
<td>Alen</td>
<td>01</td>
</tr>
<tr>
</table>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Html Table : The CSS border property

 

  • You can also add border by using CSS border property:

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 4px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<th>Student Name</th>
<th>Roll Number</th>
</tr>
<tr>
<td>Alen</td>
<td>01</td>
</tr>
<tr>
<td>Bostra</td>
<td>10</td>
</tr>
<tr>
<td>Diago</td>
<td>21</td>
</table>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Html Table : Collapsed Borders

 

  • You can also collapse borders into one border by using CSS border-collapse:

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 4px solid red;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Student Name</th>
<th>Roll Number</th>
</tr>
<tr>
<td>Alen</td>
<td>01</td>
</tr>
<tr>
<td>Bostra</td>
<td>10</td>
</tr>
<tr>
<td>Diago</td>
<td>21</td>
</table>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Html Table : Cell Padding

 

  • Cell Padding is a kind of making all cell larger than normal. It increases the distance between the matter and the border of the cells.
  • “cellpadding” attribute is used in <table> tag for this purpose.

Example

<!DOCTYPE html>
<html>
<body>
<table cellpadding=”10″ border=”4″ bordercolor=”red”>
<tr>
<th>Student Name</th>
<th>Roll Number</th>
</tr>
<tr>
<td>Alen</td>
<td>01</td>
</tr>
<tr>
</table>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Html Table : The CSS padding property

 

    • You can also set the padding by using CSS padding property:

 

  • See the given example:

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 4px solid red;
border-collapse: collapse;
}
th, td { padding: 25px; } </style>
</head>
<body>
<table>
<tr>
<th>Student Name</th>
<th>Roll Number</th>
</tr>
<tr>
<td>Alen</td>
<td>01</td>
</tr>
<tr>
<td>Bostra</td>
<td>10</td>
</tr>
<tr>
<td>Diago</td>
<td>21</td>
</table>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Html Table : Cell Spacing

 

  • Cellspacing is used to specifiy the space between the cells.
  • “cellspacing” attribute is used in <table> tag for this purpose.
  • See the given example:

Example

<!DOCTYPE html>
<html>
<body>
<table cellpadding=”10″ cellspacing=”5″ border=”4″ bordercolor=”red”>
<tr>
<th>Student Name</th>
<th>Roll Number</th>
</tr>
<tr>
<td>Alen</td>
<td>01</td>
</tr>
<tr>
</table>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Html Table : CSS border-spacing property

 

  • You can also set the cell spacing by using CSS border-spacing property:

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 4px solid red;
border-collapse: collapse;
padding: 5px;
}
table{
border-spacing: 5px;}
</style>
</head>
<body>
<table>
<tr>
<th>Student Name</th>
<th>Roll Number</th>
</tr>
<tr>
<td>Alen</td>
<td>01</td>
</tr>
<tr>
<td>Bostra</td>
<td>10</td>
</tr>
<tr>
<td>Diago</td>
<td>21</td>
</table>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Html Table : Spanning

 

    • Spanning means occupying more than one row or column by a single cell.
    • This will be done with the help of two attributes of <th> or <td> tags.
    • For spanning of rows, rowspan attribute is used.
    • For spanning of columns, colspan attribute is used.
    • Both of these attributes take the number of rows or columns that are to be occupied as their values.

Example

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<body>
<table border=”4″ bordercolor=”red”> <tr>
<th rowspan=”3″>Student Name</th>
<th>Roll Number</th>
</tr>
<tr>
<td>Alen</td>
<td>01</td>
</tr>
<tr>
<td colspan=”2″>Bostra</td>
<td>10</td>
</tr>
</table>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

  • The cell Student Name has defined rowspan=”3″. This means it will occupy three rows and the same is shown in output.
  • The columns of second and third rows are moved towards right due to row spanning of Student Name.
  • The cell Bosta has defined colspan=”2″. This means it will occupy two columns and the same is shown in output.

Html Table : Caption

 

  • Caption is a short description of anything so that it may be understood what that thing is made for. In easy words, caption is the heading of the table.
  • <caption> tag is used for this purpose.
  • It is used just after the opening tag of table element.
  • It is used in pair.
  • Important Attributes-o align= (Optional) It is used to align the caption with respect to the table. It may have following values-

    – bottom

    – center (Default)

    – left

    – right

    – top

Syntax:

 

<caption align= “any value from above”>any text/image</caption>

 

Example

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<body>
<table border=”4″ bordercolor=”red”>
<caption>Student Info</caption>
<tr>
<th>Student Name</th>
<th>Roll Number</th>
</tr>
<tr>
<td>Alen</td>
<td>01</td>
</tr>
<tr>
</table>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Html Table : Backgrounds

 

  • You can set the html table’s background by using bgcolor attribute or background attribute.
  • bgcolor : By using this attribute you can set background color for whole table or just for one cell.
  • background : By using this attribute you can set background image for whole table or just for one cell.

Example

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<body>
<table border=”4″ bordercolor=”gray” bgcolor=”orange”>
<tr>
<th>Student Name</th>
<th>Roll Number</th>
</tr>
<tr>
<td>Alen</td>
<td>01</td>
</tr>
<tr>
</table>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Here is an example of using background attribute.

Example

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<body>
<table border=”4″ bordercolor=”gray” background=”bg.jpg”>
<tr>
<th>Student Name</th>
<th>Roll Number</th>
</tr>
<tr>
<td>Alen</td>
<td>01</td>
</tr>
<tr>
</table>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Html Nested Tables

 

  • You can also use one html table into another table.

Example

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<body>
<table border=”4″ bordercolor=”gray”>
<tr>
<td> <table border=”4″ bordercolor=”gray”>
<tr>
<th>Student Name</th>
<th>Roll Number</th>
</tr>
<tr>
<td>Alen</td>
<td>01</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output



Real Time Web Analytics