HTML Table Border
1.Tables are defined with the <table> tag.
Each table starts with a <table> tag.
2.Table consists of rows and columns.
A table is divided into rows (with the <tr> tag) and
each row is divided into data cells (with the <td> tag).
3.A <td> tag can contain text,links, images, lists, forms, other tables, etc.
4.<tr> tag stands for table row.
Each table row with a <tr> tag.
5.<td> tag stands for table data and and holds the content of a data cell.
Each table data starts with a <td> tag.
6.<th> tag stands for table header.
7.Attributes and attribute values are case-insensitive.
HTML Table without border
Example: 1
<html>
<head>
</head>
<body>
</html>
<head>
</head>
<body>
<table>
<tr>
<td>Home</td>
<td>HTML</td>
<td>PHP</td>
</tr>
<tr>
<td>Java Script</td>
<td>Subnet</td>
<td>Contact</td>
</tr>
</table>
</body><tr>
<td>Home</td>
<td>HTML</td>
<td>PHP</td>
</tr>
<tr>
<td>Java Script</td>
<td>Subnet</td>
<td>Contact</td>
</tr>
</table>
</html>
Output
| Home | HTML | PHP |
| Java Script | Subnet | Contact |
Note: If you do not specify a border attribute, the table
will be displayed without borders. When browse this code, there will be not seen any table, but two lines of code. In fact table is there but you cannot see it. Hidden tables hold graphic images and text in their places in these pages.
Table with border
To display a table with borders, specify the border attribute.
Example: 2
<html>
<head>
</head>
<body>
</html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>Home</td>
<td>HTML</td>
<td>PHP</td>
</tr>
<tr>
<td>Java Script</td>
<td>Subnet</td>
<td>Contact</td>
</tr>
</table>
</body><tr>
<td>Home</td>
<td>HTML</td>
<td>PHP</td>
</tr>
<tr>
<td>Java Script</td>
<td>Subnet</td>
<td>Contact</td>
</tr>
</table>
</html>
Output
| Home | HTML | PHP |
| Java Script | Subnet | Contact |
Note: We add attribute border ="1". Border is 1 pixel thick and easier to see whole table’s rows and columns.
Example: 3
<html>
<body>
<h4>With a normal border:</h4>
<table border="1">
<tr><td>First</td> <td>Row</td> </tr>
<tr> <td>Second</td> <td>Row</td> </tr>
</table>
<h4>With a thick border:</h4>
<table border="4">
<tr> <td>First</td> <td>Row</td> </tr>
<tr> <td>Second</td> <td>Row</td> </tr>
</table>
<h4>With a very thick border:</h4>
<table border="10">
<tr><td>First</td> <td>Row</td> </tr>
<tr> <td>Second</td> <td>Row</td> </tr>
</table>
</body>
</html>
<body>
<h4>With a normal border:</h4>
<table border="1">
<tr><td>First</td> <td>Row</td> </tr>
<tr> <td>Second</td> <td>Row</td> </tr>
</table>
<h4>With a thick border:</h4>
<table border="4">
<tr> <td>First</td> <td>Row</td> </tr>
<tr> <td>Second</td> <td>Row</td> </tr>
</table>
<h4>With a very thick border:</h4>
<table border="10">
<tr><td>First</td> <td>Row</td> </tr>
<tr> <td>Second</td> <td>Row</td> </tr>
</table>
</body>
</html>
Output
With a normal border:
| First | Row |
| Second | Row |
With a thick border:
| First | Row |
| Second | Row |
With a very thick border:
| First | Row |
| Second | Row |
No comments:
Post a Comment