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

What is CSS (Cascading Style Sheet)

Cascading Style Sheets (CSS): In the dynamic world of web development, HTML (Hypertext Markup Language) serves as the foundation, laying out the structure of a webpage. However, for a webpage to captivate its audience with visually appealing designs and layouts, it requires the artistic touch of CSS, or Cascading Style Sheets. 👉Defining CSS: CSS is a style sheet language used to describe the presentation of a document written in HTML or XML. It enables web developers to control the visual aspects of a webpage, such as colors, fonts, spacing, and positioning, without altering the underlying structure defined by HTML. The term "Cascading" in CSS refers to the order of priority the styles are applied, allowing for flexibility and consistency. 👉Separation of Concerns: One of the key principles of web development is the separation of concerns, and CSS plays a crucial role in achieving this. While HTML focuses on the structure and content of a webpage, CSS handles the aesthetics ...
Post a Comment
Read more

HTML BORDER WITH CSS

 Many Type of HTML Border We have many types of border in HTML. We can change it with border style and colors. So we discussed how to change a Border color and Style in HTML. 1.      Firstly we write a Code in Sublime Text and Save it to Borderwithcss file 2.      Secondly we link a stylesheet in  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>change border style</title> <link rel="stylesheet" type="text/css" href="d:/html blog/style.css"> </head> <body> <p class="b1"> this is a normal paragraph for change border style with css</p> <p class="b2"> this is a normal paragraph for change border style with css</p> <p class="b3"> this is a normal paragraph for change border style with css</p> <p class="b4"...
Post a Comment
Read more