How to create tables in HTML | Web Development

How To Create Tables In HTML

This is our fourth part of the HTML course for front-end web development. Starting with HTML is like making a skeleton of a website. and today we will learn, How To Create Tables And List In HTML. table tag in html how to create table in html how to center a table in html nested table in html image in table html what is table in html Tables In HTML 

Topic Covered Till Now

What is Tables In HTML

HTML tables allows you to arrange data into rows and columns.

To arrange the data in a manner, So that any one can differentiate and understand it. In a very proper way.

Create Tables In HTML

<table border="3">  
   <tr><th>First_Name</th><th>Last_Name</th><th>Age</th></tr>  
   <tr><td>Neha</td><td>kaki</td><td>16</td></tr>  
   <tr><td>James</td><td>bond</td><td>18</td></tr>  
   <tr><td>chacha</td><td>charli</td><td>20</td></tr>  
   <tr><td>meena</td><td>Singh</td><td>22</td></tr>  
</table> 
Tables in HTML

First we declare table border with some value, and then we will create a table row 1 as <tr> where we take headings as <th>. now table row 2 as <tr> and table data as <td>.

Similarly we can create various table rows and table data one after another. The maximum number of column in a row is the total data available/programmed in a single table row or<tr>.

Full HTML code With Boilerplate as per web development.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to make tables in HTML</title>
</head>
<body>
    <table border="3">  
        <tr>
            <th>First_Name</th>
            <th>Last_Name</th>
            <th>Age</th>
        </tr>  
        <tr>
            <td>Neha</td>
            <td>kaki</td>
            <td>16</td>
        </tr>
        <!-- We can write it in single line also -->
        <tr><td>James</td><td>bond</td><td>18</td></tr>  
        <tr><td>chacha</td><td>charli</td><td>20</td></tr>  
        <tr><td>meena</td><td>Singh</td><td>22</td></tr>  
    </table>  
</body>
</html>

Learn full front end web development course.

HTML Tags used in table.

  • <table border = “3”> : It defines it as a table of border=3 you can change the value of border likewise.
  • <tr> : represents row in table also called table row.
  • <th> :Identically it represents table heading.
  • <td> : it contains data in table also called as table tada.

Cellpadding and Cellspacing Attributes to modify table looks

<table border="3" cellpadding = "7" cellspacing = "7">  
   <tr><th>First_Name</th><th>Last_Name</th><th>Age</th></tr>  
   <tr><td>Neha</td><td>kaki</td><td>16</td></tr>  
   <tr><td>James</td><td>bond</td><td>18</td></tr>  
   <tr><td>chacha</td><td>charli</td><td>20</td></tr>  
   <tr><td>meena</td><td>Singh</td><td>22</td></tr>   
</table> 
Cellpadding and Cellspacing in tables HTML

Cellpadding and cellspacing are two characteristics that you’ll utilize to alter the white space in your table cells.

The cellspacing attribute specifies the distance between table cells, whereas cellpadding specifies the distance between a cell’s borders and its content.

Table Caption

<table border="3">
   <caption>This is the caption</caption>
   <tr><th>First_Name</th><th>Last_Name</th><th>Age</th></tr> 
   <tr><td>Neha</td><td>kaki</td><td>16</td></tr>  
   <tr><td>James</td><td>bond</td><td>18</td></tr>  
   <tr><td>chacha</td><td>charli</td><td>20</td></tr>  
   <tr><td>meena</td><td>Singh</td><td>22</td></tr>   
</table> 
Caption in table in HTML


The caption tag appears at the top of the table and serves as a title or explanation for the table.

In newer versions of HTML/XHTML, this tag is deprecated.

Table background and border colour

<table border="3" bordercolor = "black" bgcolor = "orange">
   <tr><th>First_Name</th><th>Last_Name</th><th>Age</th></tr>  
   <tr><td>Neha</td><td>kaki</td><td>16</td></tr>  
   <tr><td>James</td><td>bond</td><td>18</td></tr>  
   <tr><td>chacha</td><td>charli</td><td>20</td></tr>  
   <tr><td>meena</td><td>Singh</td><td>22</td></tr>  
</table>
Table background and border colour

One of the following two methods can be used to create a table background:

You can use the bgcolor attribute to change the background colour of the entire table or just one cell.

You can use the background attribute to set a background picture for the entire table or just one cell.

The bordercolor parameter can also be used to change the colour of the border.

What we have learned today

We have seen the basic structure or syntax of creating tables in HTML using <tr>,<th> and <td>. Cellpadding and Cellspacing Attributes to modify table looks, table caption, Table background and border colour .

Topic Covered Previously


Leave a Comment

Your email address will not be published. Required fields are marked *

0

Tech Info