![[தமிழில்] HTML & CSS Online Course](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0_zjRmsQE0iWNlBSqfVRePPYitmf958RmAd79lMu1aWw2KITJkTwE_ENqkTkC0rMsj_Xrpe5aeI4EIM9aDZJqWK_7inZZWjx_HpHEz1kfukoLUPODXVU9fnQylB1mFqg-L9Rj7NWqpk/s300/300_200_two.png)
HTML TABLE TAGS
அட்டவணை வடிவத்தில் உங்களுடைய தகவல்களை காட்ட விரும்பினால் அதற்கு <table> tag பயன்படுத்தப்படுகிறது.வெறும் <table>என்று போட்டால் உங்களுக்கு html table உருவாகிவிடும் என்று நினைப்பது தவறு.இந்த <table> என்ற tag இன் உள்ளே <th>,<tr>,<td> போன்ற மூன்று tag பயன்படுத்தப்படுகிறது.
- <th>என்பது அட்டவணை (table) தலைப்பை (heading) குறிக்கிறது.இதனுள் கொடுக்கப்படும் தகவல் (data) தடித்து காணப்படும்.
- <tr>என்பது அட்டவணை வரிசையை குறிக்கிறது.
- <td>என்பது அட்டவணையில் கொடுக்கப்படும் தகவல் அல்லது மதிப்பையை குறிக்கின்றது.
HTML Table
<!DOCTYPE>
<html>
<body>
<table>
<tr><th>முதல் பெயர் </th><th>கடைசி பெயர்</th><th>மார்க்</th></tr>
<tr><td>திலிப் </td><td>குமார் </td><td>90</td></tr>
<tr><td>ராஜ் </td><td>குமார் </td><td>70</td></tr>
<tr><td>ராமர் </td><td>பாண்டி </td><td>92</td></tr>
<tr><td>சதீஸ் </td><td>குமார் </td><td>78</td></tr>
</table>
</body>
</html>
OUTPUT
html table with border:
HTML Table Border
<!DOCTYPE>
<html>
<body>
<table border="1"> <tr><th>முதல் பெயர் </th><th>கடைசி பெயர்</th><th>மார்க்</th></tr>
<tr><td>திலிப் </td><td>குமார் </td><td>90</td></tr>
<tr><td>ராஜ் </td><td>குமார் </td><td>70</td></tr>
<tr><td>ராமர் </td><td>பாண்டி </td><td>92</td></tr>
<tr><td>சதீஸ் </td><td>குமார் </td><td>78</td></tr>
</table>
</body>
</html>
OUTPUT
HTML Colspan
ஒரு particular data எத்தனை col-ம் எடுக்க வேண்டும் என்று சொல்வது colspan.
HTML Table Colspan
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>பெயர்</th>
<th colspan="2">போன் நம்பர் </th>
</tr>
<tr>
<td>ராமர் பாண்டி </td>
<td>7503520801</td>
<td>9555879135</td>
</tr>
</table>
</body>
</html>
OUTPUT
HTML Rowspan
ஒரு particular data எத்தனை Row-வை எடுக்க வேண்டும் என்று சொல்வது rowspan.
HTML Table Rowspan
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr><th>பெயர்</th><td>ராமர் பாண்டி </td></tr>
<tr><th rowspan="2">போன் நம்பர் </th><td>7503520801</td></tr>
<tr><td>9555879135</td></tr>
</table>
</body>
</html>
OUTPUT
No comments:
Post a Comment