HTML Tutorial || HTML Tables

author
January 27, 2024
HTML Tables

The HTML table model allows authors to arrange data text, preformatted text, images, links, forms, form fields, other tables, etc. into rows and columns of cells.

Defining an HTML Table
  • HTML table is defined with the <table> tag.
  • Each table row is defined with the <tr> tag.
  • The table header is defined with the <th> tag.
  • The table data/cell is defined with the <td> tag.
  • <caption>     − It defines the table caption.
  • <colgroup>  − It specifies a group of one or more columns in a table.
  • <thead>       − to create a separate table header.
  • <tbody>      − to indicate the main body of the table.
  • <tfoot>        − to create a separate table footer.
  • <col>          − It is used with <colgroup> element to specify column properties for each column.

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Phone</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>tom</td>
    <td>1234567890</td>
    <td>tom@xmail.com</td>
  </tr>
  <tr>
    <td>jack</td>
    <td>1122334455</td>
    <td>jack@xmail.com</td>
  </tr>
</table>

Output:
NamePhoneEmail
tom
1234567890
tom@xmail.com
jack
1122334455
jack@xmail.com0


HTML Table with Border

<table border="1">
  <tr>
    <th>Name</th>
    <th>Phone</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>tom</td>
    <td>1234567890</td>
    <td>tom@xmail.com</td>
  </tr>
  <tr>
    <td>jack</td>
    <td>1122334455</td>
    <td>jack@xmail.com</td>
  </tr>
</table>

Output:
NamePhoneEmail
tom1234567890tom@xmail.com
jack1122334455jack@xmail.com

HTML Table with colspan & rowspan

colspan

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Phone</th>
    
  </tr>
  <tr>
    <td>tom</td>
    <td>1234567890</td>
    <td>1111111111</td>
  </tr>
  
</table>


Output:
NamePhone.
tom12345678901111111111

rowspan

<table border="1">
  <tr>
    <th rowspan="3">Student</th>
    <th>Name</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>tom</td>
    <td>1234567890</td>
  </tr>
  <tr>
    <td>jack</td>
    <td>12345654321</td>
  </tr>
</table>

Output:

StudentNamePhone
tom1234567890
jack1234567890

Styling HTML tableOutput:



<!DOCTYPE>
<html>  
<head>
<style>  
        table{  
            border-collapse: collapse;  
            width: 100%;   
        }  
    th{  
        border: 2px solid green;   
        padding: 15px; 
       background-color: yellow;  
    }  
     td{  
        border: 2px solid green;   
        padding: 15px; 
       background-color: blue;  
    }            
    </style>  
</head>
<body>  
<table border="1">
  <tr>
    <th rowspan="3">Student</th>
    <th >Name</th>
    <th >Phone</th>
  </tr>
  <tr>
    <td>tom</td>
    <td>1234567890</td>
    
  </tr>
  <tr>
    <td>jack</td>
    <td>12345654321</td>
    
  </tr>
</table>
</body>
</html>

Output:

StudentNamePhone
tom1234567890
jack12345654321