Home Snippets Projects Donate

Get Snippets For:

   Java    HTML/CSS JavaScript

Tables

Code Description:

Tables are used to format data with columns and rows. Tables are defined with the <table> tag. Table Rows are defined with the <tr> tags and are used to create each set of rows after the Table Header. Within Table Row elements are Table Header and Table Data elements which are declared using the <th> and <td> tags respectively. Table Headers are where the column names are defined while Table Data is where the actual content, rather than structure, is added. The <caption> tag is available for adding a title to your table. This must be directly after the <table> tag. Be sure to NEVER use a table to structure your web page layout.

Basic Table Syntax:

<table>
<caption>Optional Caption / Title</caption>
   <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
   </tr>

   <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
   </tr>

   <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
   </tr>

   <tr>
      <td>Data 7</td>
      <td>Data 8</td>
      <td>Data 9</td>
   </tr>
</table>
Optional Caption / Title
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6
Data 7 Data 8 Data 9

Border with Padding CSS:

.myTable {
  border: 2px solid black;
  padding: 10px;
}

.myTable th {
  border: 2px solid black;
  padding: 10px;
}

.myTable td {
  border: 2px solid black;
  padding: 10px;
}
Optional Caption / Title
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6
Data 7 Data 8 Data 9

Collapsed Border with Padding CSS:

.myTable {
  border: 2px solid black;
  padding: 10px;
  border-collapse: collapse;
}

.myTable th {
  border: 2px solid black;
  padding: 10px;
  border-collapse: collapse;
}

.myTable td {
  border: 2px solid black;
  padding: 10px;
  border-collapse: collapse;
}
Optional Caption / Title
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6
Data 7 Data 8 Data 9

The "rowspan" and "colspan" attributes are used for Table Header and Table Data elements to expand the size to take up multiple rows or columns respectively. In the example below, notice the attributes on "Header 2" and "Data 1". We removed "Header 3" and "Data 4" to make room for the additional column and row size.

Row and Column Span Example:

<table class="myTable">
<caption>Optional Caption / Title</caption>
   <tr>
      <th>Header 1</th>
      <th colspan="2">Header 2</th>
   </tr>

   <tr>
      <td rowspan="2">Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
   </tr>

   <tr>
      <td>Data 5</td>
      <td>Data 6</td>
   </tr>

   <tr>
      <td>Data 7</td>
      <td>Data 8</td>
      <td>Data 9</td>
   </tr>
</table>
Optional Caption / Title
Header 1 Header 2
Data 1 Data 2 Data 3
Data 5 Data 6
Data 7 Data 8 Data 9

Runnable Table Example Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Comment Example</title>
	   
	<style>
	   
	.myTable {
           border: 2px solid black;
           padding: 10px;
           border-collapse: collapse;
        }

        .myTable th {
           border: 2px solid black;
           padding: 10px;
           border-collapse: collapse;
        }

        .myTable td {
           border: 2px solid black;
           padding: 10px;
           border-collapse: collapse;
        }
	   
        </style>
	   
    </head>
 
    <body>
        
       <table class="myTable">
       <caption>Optional Caption / Title</caption>

       <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
       </tr>

       <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
       </tr>

       <tr>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
      </tr>

      <tr>
         <td>Data 7</td>
         <td>Data 8</td>
         <td>Data 9</td>
      </tr>

      </table>

    </body>
</html>

How to Run This Code:

Simply paste this code into a plain text file with the ".html" extension and save it. You will then be able to open it in the web browser of your choice.

Related Links: