HTML TABLE:-
Table is a combination of row and columns.HTML tables allow to arrange data into rows and columns. Row and column create a cell.
EXAMPLE:-
A Simple HTML table:-
Part:-1.
<html>
<head>
<title>Create a simple html table</title>
</head>
<body>
<table>
<th>Name</th>
<th>Class</th>
<th>Roll no</th>
<tr>
<td>Kajal</td>
<td>ba</td>
<td>1</td>
</tr>
<tr>
<td>Aman</td>
<td>ba</td>
<td>2</td>
</tr>
<tr>
<td>Anu</td>
<td>ba</td>
<td>3</td>
</tr>
</table>
</body>
</html>
Table border
Part:-2.
<html>
<head>
<title>Create a simple html table using a border</title>
</head>
<body>
<table border="2"><!---you can set border thickness less or more-->
<th>Name</th>
<th>Class</th>
<th>Roll no</th>
<tr>
<td>Kajal</td>
<td>ba</td>
<td>1</td>
</tr>
<tr>
<td>Aman</td>
<td>ba</td>
<td>2</td>
</tr>
<tr>
<td>Anu</td>
<td>ba</td>
<td>3</td>
</tr>
</table>
</body>
</html>
Table Size:-
Part:-3.
<html>
<head>
<title>Create a simple html table set width and height</title>
</head>
<body>
<table height="50%" width="50%" border="2">
<th>Name</th>
<th>Class</th>
<th>Roll no</th>
<tr>
<td>Kajal</td>
<td>ba</td>
<td>1</td>
</tr>
<tr>
<td>Aman</td>
<td>ba</td>
<td>2</td>
</tr>
<tr>
<td>Anu</td>
<td>ba</td>
<td>3</td>
</tr>
</table>
</body>
</html>
#Part(4):-How to set table alignment?
<html>
<head>
<title>Create a simple html table set alihnments</title>
</head>
<body>
<table height="50%" width="50%" border="2" align="center"><!---you can set left,right,center diffeent different alignments-->
<th>Name</th>
<th>Class</th>
<th>Roll no</th>
<tr>
<td>Kajal</td>
<td>ba</td>
<td>1</td>
</tr>
<tr>
<td>Aman</td>
<td>ba</td>
<td>2</td>
</tr>
<tr>
<td>Anu</td>
<td>ba</td>
<td>3</td>
</tr>
</table>
</body>
</html>
#HTML Table Padding & Spacing:-
|
With
Padding |
||
|
hello |
hello |
hello |
|
hello |
hello |
hello |
|
hello |
hello |
hello |
<html>
<head>
<title>Create a simple html table set cellpadding="60%"</title>
</head>
<body>
<table height="50%" width="50%" border="2" cellpadding="60%">
<th>Name</th>
<th>Class</th>
<th>Roll no</th>
<tr>
<td>Kajal</td>
<td>ba</td>
<td>1</td>
</tr>
<tr>
<td>Aman</td>
<td>ba</td>
<td>2</td>
</tr>
<tr>
<td>Anu</td>
<td>ba</td>
<td>3</td>
</tr>
</table>
</body>
</html>
#Cell spacing:-
Cell spacing
is the space between each cell.
By default
the space is set to 2 pixels.
To change
the space between table cells, use the HTML cellspacing="30px" property on
the table element:
<html>
<head>
<title>Create a simple html table set cellpadding="60%"</title>
</head>
<body>
<table height="50%" width="50%" border="2" cellpadding="60%" cellspacing="80">
<th>Name</th>
<th>Class</th>
<th>Roll no</th>
<tr>
<td>Kajal</td>
<td>ba</td>
<td>1</td>
</tr>
<tr>
<td>Aman</td>
<td>ba</td>
<td>2</td>
</tr>
<tr>
<td>Anu</td>
<td>ba</td>
<td>3</td>
</tr>
</table>
</body>
</html>
#HTML Table Colspan & Rowspan:-
#WAP COLSPAN:-
<html>
<head>
<title>Create a simple html colspan program</title>
</head>
<body>
<table height="20%" width="20%" border="2">
<th colspan="2">Name</th>
<th>Class</th>
<tr>
<td>Kajal</td>
<td>Happy</td>
<td>ba</td>
</tr>
<tr>
<td>Aman</td>
<td>Simran</td>
<td>ba</td>
</tr>
<tr>
<td>Anu</td>
<td>pooja</td>
<td>ma</td>
</tr>
</table>
</body>
</html>
# WAP Rowspan:-
<html>
<head>
<title>rowspan</title>
</head>
<table border="2">
<tr>
<th>Name</th>
<td>Ravi</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>675-1234</td>
</tr>
<tr>
<td>789-8745</td>
</tr>
</table>
</body>
</html>
#WAP NESTED TABLE :-
<html>
<head>
<title>create a nested table</title>
</head>
<body>
<table border="2">
<th>Name</th>
<th>Class</th>
<th>Roll</th>
<tr>
<td>Poonam</td>
<td>Mca</td>
<td>1</td>
</tr>
<tr>
<td>Pooja</td>
<td>Mca</td>
<td>2</td>
</tr>
<tr>
<td>Khushi</td>
<td>Mca</td>
<td>
<table border="2">
<th>Name</th>
<th>Phone no</th>
<tr>
<td>poonam</td>
<td>5647-64883</td>
</tr>
<tr>
<td>pooja</td>
<td>5647-64883</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment
THANK YOU