Table Tag

Table is an set of rows and columns wchich creates cells in HTML.

  • <table> - In HTML table is created using <table> tag. It consist of one or more <tr>, <th> and <td> elements.
    • USAGE:-
      • <table>
          <tr>
            <th>Salary</th>
            <th>Expence</th>
          </tr>
          <tr>
            <td>$5000</td>
            <td>$3500</td>
          </tr>
        </table>
  • <caption> - This tag is used to define caption in table. It is inserted just after the <table> tag.
    • USAGE:-
      • <table>
         <caption>Monthly Sale</caption>
          <tr>
            <th>Sale</th>
          </tr>
          <tr>
            <td>$9000</td>
          </tr>
        </table>
  • <tr> - Row in a table is created by <tr> tag.
    • USAGE:-
      • <table>
          <tr>
            <th>Sale</th>
          </tr>
          <tr>
            <td>$9000</td>
          </tr>
        </table>
  • <th> - Table header cell or part is created by <th> tag in HTML table.
    • USAGE:-
      • <table>
          <tr>
            <th>Blue Shirt</th>
          </tr>
          <tr>
            <td>$100</td>
          </tr>
        </table>
  • <td> - The <tr> tag is used to create a standard cell in an HTML table.
    • USAGE:-
      • <table>
          <tr>
            <th>1 Kg Apple</th>
          </tr>
          <tr>
            <td>$2</td>
          </tr>
        </table>
  • <thead> - The <thead> tag is used to groub header cell  in a table.
    • USAGE:-
      • <table>
          <thead>
            <tr>
              <th>Price of Pendrive</th>
            </tr>

          </thead>
          <tbody>
            <tr>
               <td>$100</td>
            </tr>
           </tbody>
          <tfoot>
            <tr>
                <td>Price of Pendrive</td>
            </tr>
          </tfoot>
        </table>
  • <tbody> - The <tbody> tag is used to group body content of table.
    • USAGE:-
      • <table>
          <thead>
            <tr>
              <th>Price of Fish</th>
            </tr>
          </thead>
          <tbody>
            <tr>
               <td>$50</td>
            </tr>
           </tbody>

          <tfoot>
            <tr>
                <td>Price of Fish</td>
            </tr>
          </tfoot>
        </table>
  • <tfoot> - The <tfoot> tag group the footer content of table.
    • USAGE:-
      • <table>
          <thead>
            <tr>
              <th>Quantity of Shoe</th>
            </tr>
          </thead>
          <tbody>
            <tr>
               <td>500</td>
            </tr>
           </tbody>
          <tfoot>
            <tr>
                <td>Quantity of Shoe</td>
            </tr>
          </tfoot>

        </table>
  • <col> - The <col> tag is used to set column properties for each column within a column group element. It is useful for applying styles to all columns, instead of repeating the style for each cell or rows.
    • USAGE:-
      • <table>
          <colgroup>
            <col style="background-color:green">
            <col style="background-color:blue; color:white;">
            <col style="background-color:yellow">

          </colgroup>
          <tr>
            <th>Item</th>
            <th>Quantity</th>
            <th>Price</th>
          </tr>
          <tr>
            <td>Full Shirt Red</td>
            <td>2</td>
            <td>$550</td>
          </tr>
        </table>
  • <colgroup> - The <colgroup> tag is used to group the columns in a table. The <col> tab is used inside <colgroup> tag.
    • USAGE:-
      • <table>
          <colgroup>
            <col style="background-color:green">
            <col style="background-color:blue; color:white;">
            <col style="background-color:yellow">
          </colgroup>
          <tr>
            <th>Item</th>
            <th>Quantity</th>
            <th>Price</th>
          </tr>
          <tr>
            <td>Full Shirt Red</td>
            <td>2</td>
            <td>$550</td>
          </tr>
        </table>

More you may like to read