Header Ads Widget

ad728

HTML Tables

HTML Tables

Cellpadding Attribute

Cellpadding Attribute

Cellpadding Attribute

The cellpadding attribute specifies the space, in pixels, between the cell wall and the cell content.

Example

<!DOCTYPE html>
<html>
  <head>
  
<style>
table, th, td {
  border: 1px solid black;
}
</style>
 
  </head>
   <body>
<p>Table without cellpadding:</p>

<table>
  <tr>
    <th>Month</th>
   <th>Savings</th>
   </tr>
   <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
   <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
 <br>
 
 <p>Table with cellpadding:</p>
 
<table  cellpadding="10" >
  <tr>
    <th>Month</th>
   <th>Savings</th>
   </tr>
   <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
   <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
  </body>
</html>

HTML Document Output

Table without cellpadding:

Month Savings
January $100
February $80

Table with cellpadding:

Month Savings
January $100
February $80

Cellspacing Attribute

Cellspacing Attribute

Cellspacing Attribute

The cellspacing attribute specifies the space, in pixels, between cells.

The cellspacing attribute of <table> is not supported in HTML5.

Example

<!DOCTYPE html>
<html>
  <head>
  
<style>
table, th, td {
  border: 1px solid black;
}
</style>
 
  </head>
   <body>
<p>Table without cellspacing:</p>

<table>
  <tr>
    <th>Month</th>
   <th>Savings</th>
   </tr>
   <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
   <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
 <br>
 
 <p>Table with cellspacing:</p>
 
<table  cellspacing="10" >
  <tr>
    <th>Month</th>
   <th>Savings</th>
   </tr>
   <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
   <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
  </body>
</html>

HTML Document Output

Table without cellspacing:

Month Savings
January $100
February $80

Table with cellspacing:

Month Savings
January $100
February $80

Colspan and Rowspan Attributes

Colspan and Rowspan Attributes

Colspan and Rowspan Attributes

Colspan

The colspan attribute defines the number of columns a cell should span.

Rowspan

The rowspan attribute specifies the number of rows a cell should span.

Example

<!DOCTYPE html>
<html>
  <head>
  
<style>
table, th, td {
  border: 1px solid black;
}
</style>
 
  </head>
   <body>
<table>
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <tr rowspan = "2"> Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "2">Row 3 Cell 1</td>
         </tr>
</table>
  </body>
</html>

HTML Document Output

Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

Table Caption

Table Caption

Table Caption

Table Height

The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/XHTML.

Example

<!DOCTYPE html>
<html>
  <head>
  
<style>
table, th, td {
  border: 1px solid black;
}
</style>
 
  </head>
   <body>
<table>
     <caption>This is the caption</caption>
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <tr> Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
</table>
  </body>
</html>

HTML Document Output

This is the caption
Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3

Table Header, Body, and Footer

Table Header, Body, and Footer

Table Header, Body, and Footer

Table Height

Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are −

  • <thead> − to create a separate table header.
  • <tbody> − to indicate the main body of the table.
  • <tfoot> − to create a separate table footer.

Example

<!DOCTYPE html>
<html>
  <head>
  
<style>
table, th, td {
  border: 1px solid black;
}
</style>
 
  </head>
   <body>
   
<table width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>

<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>

</table>

  </body>
</html>

HTML Document Output

This is the head of the table
This is the foot of the table
Cell 1 Cell 2 Cell 3 Cell 4

Table Heading

Table Heading

Table Heading

Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by default.

Example

<!DOCTYPE html>
<html>
  <head>
  
<style>
table, th, td {
  border: 1px solid black;
}
</style>
 
  </head>
   <body>
<table>
  <tr>
    <th>Month</th>
   <th>Savings</th>
   </tr>
   <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
   <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
  </body>
</html>

HTML Document Output

Month Savings
January $100
February $80

Table Height and Width

Table Height and Width

Table Height and Width

Table Height
  • The width attribute specifies the width of a table.
  • If the width attribute is not set, a table takes up the space it needs to display the table data.
Table Width
  • The height attribute specifies the height of a cell.
  • Normally, a cell takes up the space it needs to display the content. The height attribute is used to set a predefined height of a cell.

Example

<!DOCTYPE html>
<html>
  <head>
  
<style>
table, th, td {
  border: 1px solid black;
}
</style>
 
  </head>
   <body>
<table border = "1" width = "400" height = "150" >
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <tr> Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
            <td>Row 2 Cell 3</td>
         </tr>
</table>
  </body>
</html>

HTML Document Output

Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3 Row 2 Cell 3

0 Comments:

Subscribe to: Posts (Atom)