| by Achyut Kendre | No comments

How to Create Tables-HTML?

tables in html
Tables in HTML

HTML tables allow web developers to arrange data into rows and columns. Tables are basically used to create tabular representation of data or to create a tabular layout.

Define an HTML Table

Html provides you <table> tag to create the table or define the table. It is binary tag so table starts with <table> and ends with </table>.

Table will have two sections one i head and another is body.
To create table head we need to use thead tag , header can have headings.
To create the body of table we can use tbody tag. Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td>tag. By default text in th element is bold and centered where as text in td will be regular and left aligned.

Table Attributes: – table tag has following attributes those can be used to customize table –
border: – used to define the border for the table.
bgcolor:- used to define the back ground color for the table.
width:- used to define the width of the table.
height:- used to define the height of the table.
cellpadding:- define the gap between the border of cell and content of the cell.
cellspacing:- the gap between the border of two cells. 

<html>
<head>
<title> table example </title>
</head>
<body>
    <h2> Customer information </h2>
   <table cellspacing="20" cellpadding="20" border="1" bgcolor="#3388aa">
   <thead>
         <tr>
            <th> Customer ID </th>
            <th> Cutomer Name </th>
           <th> Address </th>
           <th> Email Id </th>
      </tr>
  </thead>
  <tbody>
    <tr> 
           <td> 1 </td>
          <td>Ganesh</td>
          <td>Pune</td>
          <td>Ganesh@hotmail.com</td>
    </tr>
   <tr> 
         <td>2</td>
         <td>Suresh</td>
        <td>Mumbai</td>
        <td>Suresh@hotmail.com</td>
   </tr>
   <tr> 
         <td>2</td>
         <td>Suresh</td>
        <td>Mumbai</td>
        <td>Suresh@hotmail.com</td>
   </tr>
 </tbody> 
</body>
</html>

HTML Table – Cell that Span Many Columns. To make a cell span more than one column, use the colspan attribute.
HTML Table – Cell that Span Many Rows. To make a cell span more than one row, use the rowspan attribute.

<html>
<head>
<title> rowspan and colspan </title>
</head>
<body>
    <h2> Table example </h2>
    <table width="250" border="1">
       <tr>  <td> A</td> <td colspan="2">B</td> </tr>
      <tr> <td rowspan="2" colspan="2"> C </td> <td> D </td> </tr>
      <tr> <td> E </td> </tr>
      <tr> <td> F </td> <td> G </td> <td> H </td> </tr>
      <tr>  <td> I </td> <td> J </td> <td> K </td> </tr>
      <tr> <td colspan="3"> L </td> </tr>
      </table>
</body>
</html>

Nested Table: – table inside another table is called nested table. You can nest the another table inside other table in td tag in cell .

<html>
<head>
<title> rowspan and colspan </title>
</head>
<body>
    <h2> Table example </h2>
    <table  width="150" border="1">
         <tr> 
         <td> 
          <table width="100%" border="1">
              <tr> <td>  A </td> <td> B </td> </tr>
              <tr> <td> C </td> <td> D </td> </tr>
          </table>  
       </td>
       <td> B </td>
        <td> 
         <table width="100%"  border="1">
              <tr>  <td> 1 </td> <td> 2</td> </tr>              
              <tr>  <td> 1 </td> <td> 2</td> </tr>
          </table>
        </td> 
        </tr>
        <tr> <td> D </td> <td> E </td> <td> F </td> </tr>
        <tr> <td> G </td> <td> H </td> <td> I </td> </tr>
         <tr> 
           <td>
         <table border="1" width="100%">
              <tr>  <td> 1 </td> <td> 2</td> </tr>              
              <tr>  <td> 1 </td> <td> 2</td> </tr>
          </table>
           </td>
            <td>K </td> 
           <td>
         <table border="1" width="100%">
              <tr>  <td> 1 </td> <td> 2</td> </tr>              
              <tr>  <td> 1 </td> <td> 2</td> </tr>
          </table>
        </td>
      </tr>
 </table>
</body>
</html>

« Prev