HTML Tables

ஒரே மாதிரியான data, ஒன்றுக்கும் மேற்பட்ட எண்ணிக்கையில் இருந்தால் அதை எளிமையாக பட்டியலிட்டு காட்டவே இந்த html table பயன்படுத்தபடுகிறது. உதாரணதிற்கு ஒரு college students-யுடைய name,department,email ஆகிய data-வை display செய்யவேண்டும் எனில் அதற்க்கு HTML table-ஐ பயன்படுத்தவேண்டும். ஏனெனில் அனைத்து students-க்கும் ஒரே மாதிரியான data தான் display செய்யபடுகிறது.

table-ஐ create செய்ய <table> tag பயன்படுத்தபடுகிறது. table-ல் உள்ள ஒவொரு row-வையும் create செய்ய <tr> tag பயன்படுத்தபடுகிறது, table-ல் உள்ள ஒவொரு data-வைம் create செய்ய <td> tag பயன்படுத்தபடுகிறது, ஒவொரு column-த்திற்க்கும் heading create செய்ய <th> tag பயன்படுத்தபடுகிறது.

Example

Try this code 
<table>
    <tr>
        <th>Name</th>
        <th>Department</th>
        <th>Email</th>
    </tr>
    <tr>
        <td>Sanjitha</td>
        <td>B.com.,</td>
        <td>sanjitha@gmail.com</td>
    </tr>
    <tr>
        <td>Tharani</td>
        <td>B.Sc.,</td>
        <td>tharani@gmail.com</td>
    </tr>
    <tr>
        <td>Nikkitha</td>
        <td>B.A.English Lit.,</td>
        <td>nikkitha@gmail.com</td>
    </tr>
</table>
Output
Name Department Email
Sanjitha B.com., sanjitha@gmail.com
Tharani B.Sc., tharani@gmail.com
Nikkitha B.A.English Lit., nikkitha@gmail.com

HTML Table with default border and align

Example

Try this code 
<table border="1" align="center">
    <tr>
        <th>Name</th>
        <th>Department</th>
        <th>Email</th>
    </tr>
    <tr>
        <td>Sanjitha</td>
        <td>B.com.,</td>
        <td>sanjitha@gmail.com</td>
    </tr>
    <tr>
        <td>Tharani</td>
        <td>B.Sc.,</td>
        <td>tharani@gmail.com</td>
    </tr>
    <tr>
        <td>Nikkitha</td>
        <td>B.A.English Lit.,</td>
        <td>nikkitha@gmail.com</td>
    </tr>
</table>
Output
Name Department Email
Sanjitha B.com., sanjitha@gmail.com
Tharani B.Sc., tharani@gmail.com
Nikkitha B.A.English Lit., nikkitha@gmail.com
note: border என்பது table,th,td ஆகிய மூன்றுக்கு மட்டுமே apply செய்ய முடியும். ஒருபோதும் tr-க்கு apply செய்ய முடியாது. அதேபோல் மூன்றிக்கும் ஒரே மாதிரியான border apply செய்யவேண்டி இருந்தால், தனி தனியாக apply செய்யவேண்டிய அவசியம் இல்லை.

HTML Table add single border

Example

Try this code 
<table>
    <tr>
        <th>Name</th>
        <th>Department</th>
        <th>Email</th>
    </tr>
    <tr>
        <td>Sanjitha</td>
        <td>B.com.,</td>
        <td>sanjitha@gmail.com</td>
    </tr>
    <tr>
        <td>Tharani</td>
        <td>B.Sc.,</td>
        <td>tharani@gmail.com</td>
    </tr>
    <tr>
        <td>Nikkitha</td>
        <td>B.A.English Lit.,</td>
        <td>nikkitha@gmail.com</td>
    </tr>
</table>

<style>
table,th,td{
border:1px solid black;
border-collapse:collapse;
}
</style>
Output
Name Department Email
Sanjitha B.com., sanjitha@gmail.com
Tharani B.Sc., tharani@gmail.com
Nikkitha B.A.English Lit., nikkitha@gmail.com

HTML Table with background color;

Example

Try this code 
<table>
    <tr>
        <th>Name</th>
        <th>Department</th>
        <th>Email</th>
    </tr>
    <tr>
        <td>Sanjitha</td>
        <td>B.com.,</td>
        <td>sanjitha@gmail.com</td>
    </tr>
    <tr>
        <td>Tharani</td>
        <td>B.Sc.,</td>
        <td>tharani@gmail.com</td>
    </tr>
    <tr>
        <td>Nikkitha</td>
        <td>B.A.English Lit.,</td>
        <td>nikkitha@gmail.com</td>
    </tr>
</table>

<style>
table,th,td{
border:1px solid black;
border-collapse:collapse;
}
table{
background-color:lightgrey;
}
</style>
Output
Name Department Email
Sanjitha B.com., sanjitha@gmail.com
Tharani B.Sc., tharani@gmail.com
Nikkitha B.A.English Lit., nikkitha@gmail.com

HTML Table alternative row with background color and with 100%

Example

Try this code 
<table>
	<tr>
        <th>Name</th>
        <th>Department</th>
        <th>Email</th>
    </tr>
    <tr>
        <td>Sanjitha</td>
        <td>B.com.,</td>
        <td>sanjitha@gmail.com</td>
    </tr>
    <tr>
        <td>Tharani</td>
        <td>B.Sc.,</td>
        <td>tharani@gmail.com</td>
    </tr>
    <tr>
        <td>Nikkitha</td>
        <td>B.A.English Lit.,</td>
        <td>nikkitha@gmail.com</td>
    </tr>
</table>

<style>
table{
width:100%;
}
table,th,td{
border:1px solid black;
border-collapse:collapse;
}
tr:nth-child(even){
background-color:lightgrey;
}
tr:nth-child(odd){
background-color:white;
}
</style>
Output
Name Department Email
Sanjitha B.com., sanjitha@gmail.com
Tharani B.Sc., tharani@gmail.com
Nikkitha B.A.English Lit., nikkitha@gmail.com

Comments

gunasekaran 6th July,2022 10:56 am
very use full superb work...