HTML 5 – How to Create Table

In this post you will learn how to create different types of tables in HTML 5, I’m going to demonstrate with codes and visual images that will help you understand how table tags and its children tags work in HTML 5.

Let’s dive in…

There are three sections in <table> tag: <thead>, <tbody>, and <tfoot>. But you create HTML tables even without defining table header, table body and table footer.

Table Tag

  	   <table>  			
 		<thead> 				
 		    <!-- This is table header --> 				
 		</thead>

 		<tbody> 				
 		   <!-- This is table body -->
 		</tbody>

 		<tfoot>
 		    <!-- This is table footer -->
 		</tfoot> 			
 	   </table> 		
 

thead

thead tag is used to define table header

tbody

tbody tag is used to define table body

tfoot

tfoot tag is used to define table footer

Now, we will add some other important table tags to above code, Like: <tr>, <th>, and <td>

Now let’s understand what these tags mean

tr Tag

The <tr> tag means the row of the table. <tr> creates rows in <thead> and <tbody>

th Tag

The <th> tag means the head cell of the table. <th> this creates multiple head cells within a row.

td Tag

The <td> tag means the data cell of the table. <td> creates multiple data cells within a row

html two column table

The below code

          <table>
		<thead>
			<tr>
			 <th>Data types</th>
			 <th>Placeholder</th>
			</tr>			 		
		</thead>
		<tbody>
			<tr>
			  <td>int</td>
			  <td>"%d"</td>
			</tr>
			<tr>
			  <td>char</td>
	      	          <td>"%c"</td>
			</tr>
			<tr>
			 <td>float</td>
			 <td>"%f"</td>
			</tr>
			<tr>
			 <td>string</td>
			 <td>"%s"</td>
			</tr>
		</tbody>
	 </table>

Styling table, th, AND td

 	
 	   table, th, td{
			border-collapse: collapse;
 			border: 1px solid black;
 			font-family: serif;
 			} 				
 	

The given styling codes above used to collapse border. When you do not use the border-collapse the table border is showing like a box of each data cell and a border from outside the table too. When you forget the border- collapse option you can add in your table tag inline style code like border =”1″ (not in styling table code). Like this: <table border=”1″ >

border-collapase table

Now i’m going to show you how to create other types tables, with the help codes. And also show you images

Dashed Table

        <main>
		<table>
                   <caption><em>A test table with merged cells</em></caption>
                   <tr><th rowspan="2">     <--rowspan="2" it means the second row of the first column is will 
                                                be empty because here not give the any types of value  -->
                   <th colspan="2">Average    <--column+"2" it means the second column of the header have the 
                                                  value is Average--> 
                   <th rowspan="2">Red<bemeyes>
                   <tr><th>height<th>weight
                   <tr><th>Males<td>1.9<td>0.003<td>40%
                   <tr><th>Females<td>1.7<td>0.002<td>43%
              </table>
	</main>

In the above code i’m use the <caption> It is used in combination with the <table> tag and represents the title of the table. The tag must be inserted immediately after the tag. A table should have no more than one caption.

And i’m also use the <em> tag the tag is used to separate the text from the rest of the content. the content inside is typically displayed in italic.

The rowspan attribute in HTML specifies the number of rows a cell should span. That is if a row spans two rows, it means it will take up the space of two rows in that table.

The colspan attribute in HTML specifies the number of columns a cell should span. It allows the single table cell to span the width of more than one cell or column

Style Code

table,td,th{		
		border-collapse: collapse;
		border: 1px ;
		margin: 20px;
		padding: 20px;
		border-style: dashed;
	     }
dashed table border

Similarly, in the following table definition:

<table border="1">
     <tr><td>1 <td rowspan="2">2 <td>3   <--This is the first row of the table-->
     <tr><td>4 <td>6                      <-- This is second row of the table-->
     <tr><td>7 <td>8 <td>9                <--This is the third row of the table-->
</table>

The code (table) will look like in your browser this type.

html column table

The given table in the above is used the rowspan, And similarly you can use the colspan

<table border="1">
                 <tr><td colspan="2">4 <td>6
                <tr><td>7 <td>8 <td>9
   </table>
html column table

Overlap Table

How is happen. Because the rowspan and colspan code (“2”) value is not correct

<table border="1">
       <tr><td>1 <td>2 <td>3
       <tr><td>4 <td rowspan="2">5 <td>6
       <tr><td colspan="2">7 <td>9
</table>
html overlap table

Simple Table

This HTML 5 table does not use <thead> , <tdoby> & <tfoot> it only uses <tr> to defined table header and table body

<table>
	<caption><em>cups of coffee consumed by each senator</em></caption>
	<tr>
		<th>Name</th>
		<th>Cups</th>
		<th>Type of Coffee</th>
		<th>Sugar?</th>
	</tr>
	<tr>
		<td>T. Sexton</td>
		<td>10</td>
		<td>Espresso</td>
		<td>No</td>
	</tr>
	<tr>
		<td>J. Dinnen</td>
		<td>5</td>
		<td>Decaf</td>
		<td>Yes</td>
	</tr>
</table>

style code

table,td,th{				
		margin: 20px;
		padding: 20px;				
	       }
html simple table

Column Table

<table border="5" frame="vsides" rules="cols">   <--Here are use the frame which is vsides. vsides  means  only 
                                                   the right and the left side-->  
<tr> <td>1 <td>2 <td>3
<tr> <td>4 <td>5 <td>6
<tr> <td>7 <td>8 <td>9
</table>
html frame column table

Types of the frame and rules:

Frame Types:  void|above|below|hsides|lhs|rhs|vsides|box|border

  1. void: No sides. This is the default value.
  2. above: The top side only.
  3. below: The bottom side only.
  4. hsides: The top and bottom sides only.
  5. vsides: The right and left sides only.
  6. lhs: The left-hand side only.
  7. rhs: The right-hand side only.
  8. box: All four sides.
  9. border: All four sides.

Rules Types: none|groups|rows|cols|all

  1. none: No rules. This is the default value.
  2. groups: Rules will appear between row groups column groups only.
  3. rows: Rules will appear between rows only.
  4. cols: Rules will appear between columns only.
  5. all: Rules will appear between all rows and columns.

Here’s a somewhat more complex example illustrating other values for the scope attribute:

Scope: It may be used in header attribute for particular row,

<table border="1" cellpadding="5" cellspacing="2"
  summary="History courses offered in the community of
           Bath arranged by course name, tutor, summary, 
           code, and fee">
  <tr>
    <th colspan="5" scope="colgroup">Community Courses -- Bath Autumn 1997</th>
  </tr>
  <tr>
    <th scope="col" abbr="Name">Course Name</th>
    <th scope="col" abbr="Tutor">Course Tutor</th>
    <th scope="col">Summary</th>
    <th scope="col">Code</th>
    <th scope="col">Fee</th>
  </tr>
  <tr>
    <td scope="row">After the Civil War</td>
    <td>Dr. John Wroughton</td>
    <td>
       The course will examine the turbulent years in England
       after 1646. <em>6 weekly meetings starting Monday 13th
      October.</em>
    </td>
    <td>H27</td>
    <td>&pound;32</td>
  </tr>
  <tr>
    <td scope="row">An Introduction to Anglo-Saxon England</td>
    <td>Mark Cottle</td>
    <td>
       One day course introducing the early medieval
       period reconstruction the Anglo-Saxons and
       their society. <em>Saturday 18th October.</em>
    </td>
    <td>H28</td>
    <td>&pound;18</td>
  </tr>
  <tr>
    <td scope="row">The Glory that was Greece</td>
    <td>Valerie Lorenz</td>
    <td>
     Birthplace of democracy, philosophy, heartland of theater, home of
     argument. The Romans may have done it but the Greeks did it
     first. <em>Saturday day school 25th October 1997</em>
    </td>
    <td>H30</td>
    <td>&pound;18</td>
  </tr>
</table>
html simple table