 |
| HTML Table with Inline Internal & External |
HTML Table
An HTML Table is define with the <table> Tag.
- Each table row is deifined with the <tr> tag.
- A table header is defined with the <th> tag.
- A table data.cell is defined with the <td> tag.
 |
| Row and Column |
Example
<!DOCTYPE html>
<html>
<body>
<h2>HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Kumar Atul</td>
<td> jaiswal</td>
<td>19</td>
</tr>
<tr>
<td>Hacker</td>
<td>BoY</td>
<td>18</td>
</tr>
<tr>
<td>Naam to</td>
<td>suna hoga</td>
<td>17</td>
</tr>
</table>
</body>
</html>
Result
Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
Adding a border
If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property:
table, th, td {
border: 1px solid black;
}
Example of Adding Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Kumar Atul</td>
<td> jaiswal</td>
<td>19</td>
</tr>
<tr>
<td>Hacker</td>
<td>BoY</td>
<td>18</td>
</tr>
<tr>
<td>Naam to</td>
<td>suna hi hoga</td>
<td>17</td>
</tr>
</table>
</body>
</html>
Result
Example of Adding Inline CSS
<html>
<head>
</head>
<body>
<table style="width:100%">
<tr>
<th style=" border: 1px solid black;" >Firstname</th>
<th style=" border: 1px solid black;" >Lastname</th>
<th style=" border: 1px solid black;">Age</th>
</tr>
<tr>
<td style=" border: 1px solid black;">Kumar Atul</td>
<td style=" border: 1px solid black;"> jaiswal</td>
<td style=" border: 1px solid black;">19</td>
</tr>
<tr>
<td style=" border: 1px solid black;">Hacker</td>
<td style=" border: 1px solid black;">BoY</td>
<td style=" border: 1px solid black;">18</td>
</tr>
<tr>
<td style=" border: 1px solid black;">Naam to</td>
<td style=" border: 1px solid black;">suna hoga</td>
<td style=" border: 1px solid black;">17</td>
</tr>
</table>
</body>
</html>
Result
Example of Adding External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>Use the external CSS File to add a border to the table.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Kumar Atul</td>
<td> jaiswal</td>
<td>19</td>
</tr>
<tr>
<td>Hacker</td>
<td>BoY</td>
<td>18</td>
</tr>
<tr>
<td>Naam to</td>
<td>suna hoga</td>
<td>17</td>
</tr>
</table>
</body>
</html>
otherwise if you do not want to use of CSS Internal file, you can use of Inline CSS
Internal CSS
 |
| Internal CSS |
Inline CSS
 |
| Inline CSS |
External CSS
 |
| External CSS |
Video on this Topic :- Coming Soon
0 comments:
Post a Comment
For Any Tech Updates, Hacking News, Internet, Computer, Technology and related to IT Field Articles Follow Our Blog.