Skip to main content

Tables in HTML

How to Use Table tag in HTML

In this blog we understand the table elements in HTML. How to Create a Tables in HTML
Firstly we understand table elements. 
1. when we create a table in editor type with <table>
2. after that we create a table row with <tr>
3. between <tr> we create table data <td>
see it into sublime text editor

<body>

<table border="1px">
<caption> Student Data</caption>
<tr>
<td> Name</td>
<td>Roll NO</td>
<td>Marks</td>
<td>total Marks</td>
<td>Percentage</td>
</tr>
<tr>
<td> JOhn</td>
<td>32655</td>
<td>250</td>
<td>500</td>
<td>50%</td>
</tr>
<tr>
<td> Carter</td>
<td>1254</td>
<td>250</td>
<td>500</td>
<td>50%</td>
</tr>
</table>

We use <caption> tag inside the Table. That means it is heading of table. it is automatically take a width in table.

What is Colspan & Rowspan

COLSPAN : it is used for merged two columns in one. 
ROWSPAN: it is used for merged rows in one.

Lets See in Example:
Without Colspan


With colspan


Code is Here for Colspan:
<table border="1px">
<caption> Student Data</caption>

<tr>
<td colspan="5" align="center"> STUDENTS OF OUR SCHOOLS </td>
</tr>
<tr>
<td> Name</td>
<td>Roll NO</td>
<td>Marks</td>
<td>total Marks</td>
<td>Percentage</td>
</tr>
<tr>
<td> JOhn</td>
<td>32655</td>
<td>250</td>
<td>500</td>
<td>50%</td>
</tr>

<tr>
<td> Carter</td>
<td>1254</td>
<td>250</td>
<td>500</td>
<td>50%</td>
</tr>
</table>

Let see Rowspan in HTML

With Rowspan


Code: <table border="1px">
<caption> Student Data</caption>

<tr>
<td colspan="5" align="center" bgcolor="#AAB7B8"> STUDENTS OF OUR SCHOOLS </td>
</tr>
<tr>
<td> Name</td>
<td>Roll NO</td>
<td>Marks</td>
<td>total Marks</td>
<td>Result</td>
</tr>
<tr>
<td> JOhn</td>
<td>32655</td>
<td>250</td>
<td>500</td>
<td rowspan="2" bgcolor="yellow">Pass</td>
</tr>

<tr>
<td> Carter</td>
<td>1254</td>
<td>250</td>
<td>500</td>
</tr>
</table>

Keep practice on table elements and do best :
Kindly follow my blog for a update
Labels:

Comments

Post a Comment

Popular posts from this blog

HTML Basic

 How to Write HTML Tags All HTML document must start with <!DOCTYPE HTML> HTML Document start with <html> and end with </html> (that's call a start tag and end tags. The visible part of the document between <body> and </body> tags. Type of Heading Tags:  HTML document contains a 6 types of heading  we are heading describe with  <h1> heading 1 </h1> tags <h2>  heading 2  </h2>   <h3>  heading 3  </h3>   <h4>  heading 4  </h4>   <h5>  heading 5  </h5>   <h6>  heading 6  </h6> Every heading have a different fonts size. Example: Do practice and Touch with our blog  
Post a Comment
Read more

Forms Tag in HTML

Forms tag in HTML 👉 The forms tag is used to create an HTML form for user input.. 👉 In this Blog i will show you how to create a form and its tags, attributes. 👉 Let's Start Firstly we  create a form start with <form> tag </form> <form action=" serverlink " method="POST" autocomplete="off"> <fieldset >  <legend> Registration form</legend> Note: Firstly we create a Label tag  <label for="fname" class="fname"> First Name </label> </br> 👉We use input type ="text" for  get a user information in text. like name address, and other info.           <input type="text" name="fname" id="fname"> </br> </br> <label for="lname"> Last Name </label></br> <input type="text" name="lname" id="lname"> </br> </br> 👉     When we want a user email id so we
Post a Comment
Read more

HTML BACKGROUND IMAGES

HTML Background Images In this Blog we learn that how to change background color in HTML and how to use background element in Backgrounds. 1.     In this blog we use Internal CSS to change a background. 2.     We given a code Below in this Blog and  You can see on youtube video link here:  Click Here <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Image Background</title> <style type="text/css"> body{background-image: url(D:\mybloglogo.png); background-repeat: no-repeat; background-attachment: fixed; background-size: auto;} </style> </head> <body> <h2>What is Lorem Ipsum? </h2>  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
Post a Comment
Read more