HTML Table Caption
1.A Table caption allows to specify a line of text that will appear centered above or below the table.
2.The <caption> tag acts like a title for the table.
3.The <caption> tag must be the first element in the <table> tag.
4.By default, the table caption is center-aligned above a table.
5.The <caption> tag has one attribute ALIGN that can be either TOP (above the table) or BOTTOM (below the table).
Example: 1
<html>
<head>
</head>
<body>
<table border="1">
<caption>Menu Description</caption>
<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>
</html>
<head>
</head>
<body>
<table border="1">
<caption>Menu Description</caption>
<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>
</html>
Output
| Home | HTML | PHP |
| Java Script | Subnet | Contact |
Example: 2 Align="top" attribute
<html>
<head>
</head>
<body>
<table border="1">
<caption align="top">Top Caption Example</caption>
<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>
</html>
<head>
</head>
<body>
<table border="1">
<caption align="top">Top Caption Example</caption>
<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>
</html>
Output
| Home | HTML | PHP |
| Java Script | Subnet | Contact |
Example: 2 Align="bottom" attribute
<html>
<head>
</head>
<body>
<table border="1">
<caption align="bottom">Bottom Caption Example</caption>
<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>
</html>
<head>
</head>
<body>
<table border="1">
<caption align="bottom">Bottom Caption Example</caption>
<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>
</html>
Output
| Home | HTML | PHP |
| Java Script | Subnet | Contact |
No comments:
Post a Comment