HTML | Tables
A
table is a rendezvous of information in rows and columns, or presumably in a
very additional complicated structure. Tables area unit wide utilized in
communication, research, and knowledge analysis.
ü Tables ar helpful
for numerous tasks like presenting text data and numerical information.
ü Tables will be wont
to compare 2 or a lot of things in tabular type layout.
ü Tables are
able to produce databases.
Defining
Tables in HTML
<!DOCTYPE html>
<html>
<body bgcolor="#E6E6FA">
<table
style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rahul</td>
<td>mehadi</td>
<td>26</td>
</tr>
<tr>
<td>jalal</td>
<td>ashik</td>
<td>19</td>
</tr>
<tr>
<td>Sami</td>
<td>rayhan</td>
<td>17</td>
</tr>
</table>
</body>
</html>
Output:
1. Adding a border to a HTML Table :
<!DOCTYPE html>
<html>
<body bgcolor="#E6E6FA">
<style>
table, th, td {
border: 1px solid black;
}
</style>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rahul</td>
<td>mehadi</td>
<td>26</td>
</tr>
<tr>
<td>jalal</td>
<td>ashik</td>
<td>19</td>
</tr>
<tr>
<td>Sami</td>
<td>rayhan</td>
<td>17</td>
</tr>
</table>
</body>
</html>
Output:
2. Adding Collapsed Borders in a
HTML Table
<!DOCTYPE
html>
<html>
<body bgcolor="#E6E6FA">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rahul</td>
<td>mehadi</td>
<td>26</td>
</tr>
<tr>
<td>jalal</td>
<td>ashik</td>
<td>19</td>
</tr>
<tr>
<td>Sami</td>
<td>rayhan</td>
<td>17</td>
</tr>
</table>
</body>
</html>
Output:
3. Adding Cell Padding in a
HTML Table :
<!DOCTYPE
html>
<html>
<body bgcolor="#E6E6FA">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
</style>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rahul</td>
<td>mehadi</td>
<td>26</td>
</tr>
<tr>
<td>jalal</td>
<td>ashik</td>
<td>19</td>
</tr>
<tr>
<td>Sami</td>
<td>rayhan</td>
<td>17</td>
</tr>
</table>
</body>
</html>
Output:
4. Adding
Left Align Headings
in a HTML Table :
<!DOCTYPE html>
<html>
<body bgcolor="#E6E6FA">
<body bgcolor="#E6E6FA">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
th
{
text-align: left;
}
</style>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rahul</td>
<td>mehadi</td>
<td>26</td>
</tr>
<tr>
<td>jalal</td>
<td>ashik</td>
<td>19</td>
</tr>
<tr>
<td>Sami</td>
<td>rayhan</td>
<td>17</td>
</tr>
</table>
</body>
</html>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
th
{
text-align: left;
}
</style>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rahul</td>
<td>mehadi</td>
<td>26</td>
</tr>
<tr>
<td>jalal</td>
<td>ashik</td>
<td>19</td>
</tr>
<tr>
<td>Sami</td>
<td>rayhan</td>
<td>17</td>
</tr>
</table>
</body>
</html>
Output:
5. Adding Border Spacing in a HTML Table :
<!DOCTYPE html>
<html>
<body bgcolor="#E6E6FA">
<style>
table, th, td {
border: 1px solid black;
}
table {
border-spacing: 5px;
}
</style>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rahul</td>
<td>mehadi</td>
<td>26</td>
</tr>
<tr>
<td>jalal</td>
<td>ashik</td>
<td>19</td>
</tr>
<tr>
<td>Sami</td>
<td>rayhan</td>
<td>17</td>
</tr>
</table>
</body>
</html>
Output:
6. Adding
Cells that Span Many Columns in HTML Tables:
<!DOCTYPE html>
<html>
<head >
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left; }
</style>
</head>
<body bgcolor="#E6E6FA">
<h2>Cell that spans two columns:</h2>
<table style="width:100%">
<tr>
<th>Name</th>
<th
colspan="2">Telephone</th>
</tr>
<tr>
<td>Mehadi</td>
<td>654327854</td>
<td>96577557785</td>
</tr>
</table>
</body>
</html>
Output:
7. Adding Cells that Span Many Rows in HTML Tables :
<!DOCTYPE html>
<html>
<head bgcolor="#E6E6FA">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left; }
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Mehadi</td>
</tr>
<tr>
<th
rowspan="2">Telephone:</th>
<td>9125577854</td>
</tr>
<tr>
<td>8565557785</td>
</tr>
</table>
</body>
</html>
Output:
<!DOCTYPE html>
<html>
<body>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
th {
text-align: left;
}
</style>
</head>
<body bgcolor="#E6E6FA">
<table style="width:100%">
<caption>DETAILS</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Rahul</td>
<td>mehadi</td>
<td>26</td>
</tr>
<tr>
<td>jalal</td>
<td>ashik</td>
<td>19</td>
</tr>
<tr>
<td>Sami</td>
<td>rayhan</td>
<td>17</td>
</tr>
</table>
</body>
</html>
Output:
No comments:
Post a Comment