HTML Tables

I hope you read my HTML List articles.

HTML Tables

   Did you know how to create the table and insert the data into the table in normally? HTML table has same mechanism.Tables represent a simple mechanism for creating rows and columns of data.
   HTML table code has 4 main parts. They are:

• <table> tag - define a HTML table
• <tr> tag - define a table row
• <th> tag - define a table heading. By default, table headings are bold and centered. 
• <td> tag - define a table data/cell. It is the data containers of the table.They can contain all sorts of HTML elements; text, images, lists, other tables, etc.4

               Example code
                    <table>
                           <tr>                                
                                <th>Firstname</th>
                                <th>Lastname</th> 
                                <th>Age</th>
                           </tr>                           
                           <tr>                                
                                <td>Jill</td>
                                <td>Smith</td>
                                <td>50</td>
                           </tr>                           
                           <tr>                                
                                <td>Eve</td>
                                <td>Jackson</td>
                                <td>94</td>
                           </tr>                           
                           <tr>                                
                                <td>John</td>
                                <td>Doe</td>
                                <td>80</td>
                           </tr>                    
                    </table>

               Output

   Now you can create the HTML tables. Sometimes you can see combine two or more rows or two or more columns in the table.

• Rowspan - used to make the cell span more than a row.

               Example code
                    <table>
                           <tr>                                
                                <th>Name:</th>
                                <td>Bill Gates</td>
                           </tr>                           
                           <tr>                                
                                <th rowspan="2">Telephone:</th>
                                <td>55577854</td>
                           </tr>                           
                           <tr>                                
                                <td>55577855</td>
                           </tr>                    
                    </table>

               Output

   You can see the two telephone numbers are in the two separate rows. The row which is named as Telephone is a combination of the previously mentioned rows.

• Colspan - used to make the cell span more than a column.

               Example code
                    <table>
                           <tr>
                                <th>Name</th>
                                <th colspan="2">Telephone</th>
                           </tr>
                           <tr>                                
                                <td>Bill Gates</td>
                                <td>55577854</td>
                                <td>55577855</td>
                           </tr>                    
                    </table> 

               Output

   You can see the two telephone numbers are in the two separate Columns. The column which is named as Telephone is a combination of the previously mentioned columns. 

Adding caption

• <caption> tag : used to add a caption to a table.It must be inserted immediately after the <table> tag.

               Example code
                    <table>
                       <caption>Monthly savings</caption>
                           <tr>
                             <th>Month</th>
                             <th>Savings</th>
                           </tr>
                           <tr>
                             <td>January</td>
                             <td>$100</td>
                           </tr>
                           <tr>
                             <td>February</td>
                             <td>$50</td>
                           </tr>
                    </table>

               Output

               Exercise

                    <table>
                       <caption>Time Table</caption>
                           <tr>
                               <th rowspan="6">Hours</th>
                               <th>Mon</th>
                               <th>Tues</th>
                               <th>Wed</th>
                               <th>Thur</th>
                               <th>Fri</th>
                           </tr>
                           <tr>
                               <td>Science</td>
                               <td>Maths</td>
                               <td>Science</td>
                               <td>Maths</td>
                               <td>Art</td>
                           </tr>
                           <tr>
                               <td>Social</td>
                               <td>History</td>
                               <td>English</td>
                               <td>Social</td>
                               <td>Sport</td>
                           </tr>
                          <tr>
                               <td colspan="5">Lunch</td>
                           </tr>
                           <tr>
                               <td>Science</td>
                               <td>Maths</td>
                               <td>Science</td>
                               <td>Maths</td>
                               <td rowspan="2">Project</td>
                           </tr>
                           <tr>
                               <td>Social</td>
                               <td>History</td>
                               <td>English</td>
                               <td>Social</td>
                           </tr>
                    </table>

   I hope you got the knowledge of HTML table.

   See you soon with the HTML form.