Skip to main content

How create tables in html?

Html Table

This tutorial will help you to learn Html Table and It is very easy to learn .You just follow my tutorial .Open your notepad and write code ,save it and see it in browser step by step.

Lets Start.

Html Table

Table is used to store data in rows and columns. We will use example how can create a table in html

Example

 <!DOCTYPE html>

<html>

<body>


<h2>Basic HTML Table</h2>


<table style="width:100%">

  <tr>

    <th>Name</th>

    <th>FatherName</th> 

    <th>Age</th>

  </tr>

  <tr>

    <td>Ali</td>

    <td>Abbas</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Aslam</td>

    <td>Ashraf</td>

    <td>45</td>

  </tr>

  <tr>

    <td>Mohsin</td>

    <td>Ali</td>

<td>40</td>

  </tr>

</table>

</body>

</html>

Browser Result:
How create tables in html?


<table> is used to define table in html. <tr> tag is used for table row in html.

Table header is defined by <th> and <td> is used to define table data.

Table Border

Now we are going to add border in html table. For this we use  html style.

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

}

</style>

</head>

<body>

 

<h2>Basic HTML Table</h2>

 

<table style="width:100%">

  <tr>

    <th>Name</th>

    <th>FatherName</th>

    <th>Age</th>

  </tr>

  <tr>

    <td>Ali</td>

    <td>Abbas</td>

    <td>50</td>

  </tr>

 <tr>

    <td>Aslam</td>

    <td>Ashraf</td>

    <td>45</td>

  </tr>

  <tr>

    <td>Mohsin</td>

    <td>Ali</td>

<td>40</td>

  </tr>

</table>

</body>

</html>

Browser Result:

How create tables in html?


We use  border property in html style to define border in html table.

 

Collapsed Borders

 

For collapsed borders, we will use border-collapse property in html syles.

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

}

</style>

</head>

<body>

 

<h2> HTML Table-Collapsed Borders</h2>

<table style="width:100%">

  <tr>

    <th>Name</th>

    <th>FatherName</th>

    <th>Age</th>

  </tr>

  <tr>

    <td>Ali</td>

    <td>Abbas</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Aslam</td>

    <td>Ashraf</td>

    <td>45</td>

  </tr>

  <tr>

    <td>Mohsin</td>

    <td>Ali</td>

<td>40</td>

  </tr>

</table>

</body>

</html>

Browwer Result:

How create tables in html?

I hope you like the post ,please don't hesitate to share my post to your friends. Thanks!!!



Labels:

Comments

Post a Comment

Popular posts from this blog

Best and Top 5 Camera Brands 2021

  Regardless of whether you're purchasing your first computerized camera or updating your current photography gear, realizing the top camera brands in 2021 is fundamental. Picking the correct brand for you is significant in light of the fact that it will go far to molding your photography style and how you work out your unit. The brand you pick will likewise impact the nature of your gear and the scope of frill viable with it. We mean to make the determination cycle much simpler by showing you the best camera brands for advanced cameras. So how about we investigate the top camera brands accessible and what you need to know to settle on the best buying choice. Canon Odds are that in the event that you've at any point thought about purchasing another camera, the name Canon has come up.                                                       ...
Post a Comment
Read more

best smartwatches for 2021:Top 5 smartwatches across the world

The best smartwatches accomplish more than show warnings on your wrist. They're every-thing in one: a wellness tracker for getting better an advanced pouch and now and again, even a telephone on your wrist.   A smartwatch can likewise save your existence with raised pulse cautions and consequently associate you to crisis administrations in the event that you fall. Electrocardiogram (ECG) and blood oxygen (SpO2) readings are lead of certain superior models, as well. The previous distinguishes indications of atrial fibrillation, while the last is a decent pointer of respiratory wellbeing. In any case, the best smartwatches show improvement over others. Some have massive numbers of applications you can download, and some have batteries that will scarcely most recent daily, while others can go almost seven days on a charge. What's more, obviously there's style: The best smartwatches can be altered, from their ties to their appearances, to best fit with your character. Wha...
Post a Comment
Read more

Introduction to HTML

HTML stands for Hyper Text Markup Language that is used to create web pages, tells the browser how display content. It is used to define the structure of a web-page. Example: <!DOCTYPE html> <html> <head> <title>page title</title> </head>             <body>             <h1>this is heading</h1>             <p>this paragraph>             </body> </html> Explanation: <!DOCTYPE html> defines that this document is HTML. <html> is root code of page. <head> contains meta information of html page. <title> is use to define title of page and display in browser bar. <body> is used to define body   of page and contains the content that is sh...
Post a Comment
Read more