<< Previous Next >>

CSS Tables

వెబ్ పేజ్ పై ఒక table ని డిస్ప్లే చెయ్యడానికి HTML లో <table> అనే ట్యాగ్ ను వాడతారు దీనికి జత ట్యాగ్ </table> కూడా ఉంటుంది. ఇందులో <tr> అనేది table row (అడ్డుగీత) , <td> అనగా table data (కేవలం మీరు సులువుగా గుర్తుపెట్టుకోడానికి దీన్ని నిలువుగీత అనుకోవచ్చు). ఈ రెండు ట్యాగ్ లకు జత ట్యాగ్ లు కూడా ఉంటాయి. క్రింది ఉదాహరణను పరిశీలించండి.

ఇప్పుడు మనం CSS styles ని ఇప్పటివరకు వివరించిన ట్యాగ్ లకు ఎలా వాడాలో తెలుసుకుందాం.

Sample webpage
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table, th, td {
border: solid 1px black;
}
</style>
</head>
<body>

<table>
<tr>
<th>Firstname</th> <th>Lastname</th> <th>Savings</th>
</tr>
<tr>
<td>Sabrina</td> <td>Granniel</td> <td>$100</td>
</tr>
<tr>
<td>Beyonce</td> <td>Granniel</td> <td>$150</td>
</tr>
</table>

</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.
Firstname Lastname Savings
Sabrina Granniel $100
Beyonce Granniel $150

పై ఉదాహరణలో <th>, </th> వీటిని table header అంటారు ఇందులో హెడ్డింగ్ లను రాస్తారు. టేబుల్ lines కి కలర్ లేకపోతే table ని గుర్తించలేము. అందులోని text మాత్రమే బయటకు కనబడుతుంది. మీకు సులువుగా అర్థం కావడానికి " border - color : #FF0000 ;" గా వ్రాయడం జరిగింది. table లోని మూలకాలు default గా ఎడమవైపుకి align చెయ్యబడి ఉంటాయి. అనగా " text - align : left ; " అని అర్థం. (పై ఉదాహరణలో దీన్ని వ్రాసినా తేడా మాత్రం ఉండదు. కాని దీని ఉపయోగం చాలా ఉంటుంది.) ఈ align విలువ left ని "right" లేదా "center" గా మార్చి table లోని మూలకాలను కుడివైపు లేదా మధ్యలో (center) డిస్ప్లే అయ్యేవిధంగా చెయ్యవచ్చును.

text - align example

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table, th, td {border: solid 1px black;}

</style>
</head>
<body>

<table>
<tr>
<th>Firstname</th> <th>Lastname</th> <th>Savings</th>
</tr>
<tr>
<td>Sabrina</td> <td>Granniel</td> <td>$100</td>
</tr>
<tr>
<td>Beyonce</td> <td>Granniel</td> <td>$150</td>
</tr>
</table>

</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.
Firstname Lastname Savings
Sabrina Granniel $100
Beyonce Granniel $150

Table Padding

Table లోని element (మూలకము) యొక్క Padding అనగా ఆ table యందుగల మూలకానికి మరియు దానికి నాలుగువైపులా( left top right bottom ) ఉండే border కు మధ్యలో గల ఖాళీ ప్రదేశం. క్రింది ఉదాహరణలో table header elements <th>, </th> కు padding ని apply చెయ్యలేదు. అందువల్ల మీరు క్రింది example లోని బటన్ ని Click చేసినా వీటిలో ఎలాంటి మార్పూ ఉండదు. గమనించండి.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table, th, td {border: solid 1px black;}

</style>
</head>
<body>

<table>
<tr>
<th>Firstname</th> <th>Lastname</th> <th>Savings</th>
</tr>
<tr>
<td>Sabrina</td> <td>Granniel</td> <td>$100</td>
</tr>
<tr>
<td>Beyonce</td> <td>Granniel</td> <td>$150</td>
</tr>
</table>

</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.
Firstname Lastname Savings
Sabrina Granniel $100
Beyonce Granniel $150

Table Width and Height

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table, th, td {border: solid 1px black;}
th { width : 10px ;}
</style>
</head>
<body>

<table>
<tr>
<th>Firstname</th> <th>Lastname</th> <th>Savings</th>
</tr>
<tr>
<td>Sabrina</td> <td>Granniel</td> <td>$100</td>
</tr>
<tr>
<td>Beyonce</td> <td>Granniel</td> <td>$150</td>
</tr>
</table>

</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.
Firstname Lastname Savings
Sabrina Granniel $100
Beyonce Granniel $150

Collapse Borders

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table, th, td {border: solid 1px black;}
</style>
</head>
<body>

<table>
<tr>
<th>Firstname</th> <th>Lastname</th> <th>Savings</th>
</tr>
<tr>
<td>Sabrina</td> <td>Granniel</td> <td>$100</td>
</tr>
<tr>
<td>Beyonce</td> <td>Granniel</td> <td>$150</td>
</tr>
</table>

</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.
Firstname Lastname Savings
Sabrina Granniel $100
Beyonce Granniel $150

తదుపరి CSS Border property గురించి...

<< Previous Next >>
Back to Top