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

TYPE OF HTML CSS

 Types of HTML CSS To change a HTML documents style Three Types to Add CSS in HTML 1.      Inline CSS: To using by <p style> change a style of HTML Attribute.      2.     Internal CSS: by using <style> tag in the below of <head> tag.           3.    External CSS : By using <link> element in link to external CSS file. INLINE CSS We use inline CSS in a line      Example : <p style=“color:green;”> Green Text </p> Here we use inline css… INTERNAL CSS In this section we use Internal CSS.      We use <style> element under the <head> section. Example:           <style>                 p {color:green ;}                      </style> EXTERNAL CSS External CSS create a new fil...
Post a Comment
Read more

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

Change the Style Elements in HTML

 HTML Styles Elements  What you learn today Use Background-color   for background color html page. Use color attribute for text color Use font-family for text fonts Use font-size for text size. Use text-align for text alignment Youtube channel : Like and Subscribe my Channel Example <!DOCTYPE html> <html> <head> <title> style sheet </title> </head> <body style =" background-color:purple; " > <p style =" color:red; "> this is text color </p> <p style =" font-family:arial; " > font family using html </p> <p style =" font-size:200%; " > font size using html </p> <p style =" text-align:center; " > text align center using html </p> </body> </html>
Post a Comment
Read more