Attributes and table styling in html hindi
एचटीएमएल वेब पेज में टेबल को क्रिएट करने के बाद आप आर्डिनरी एचटीएमएल टेबल में स्पेशल टेबल ऐट्रिब्यूट्स और सीएसएस स्टाइलिंग इफ़ेक्ट को सिंपल टेबल की स्टाइलिंग और डिफ़ॉल्ट प्रीव्यू को मोर अट्रैक्टिव और कमर्शियल फॉर्मेट लेआउट में नई थीम और स्टाइलिंग के साथ प्रीव्यू कर सकते है.
So, let’s learn about table attributes and CSS styles and effects in an HTML web page.
HTML Table Tag Attributes.
HTML <table> tag attributes.
Table border tag attributes – एचटीएमएल वेब पेज में क्रिएटेड टेबल बॉर्डर की विड्थ को कस्टम डिफाइन कर सकते है, अपनी जरूरत के अनुसार टेबल विड्थ को मैन्युअल कस्टम मॉडिफाई करे।
Table border tag example.
<table border=”2″>
<!– write desire table content here –>
</table>
Table cellspacing tag attributes – एचटीएमएल वेब पेज में क्रिएटेड टेबल सेल्स के मध्य कितना स्पेस क्रिएट करना है, आप अपनी जरूरत के अनुसार पर्टिकुलर टेबल सेल में स्पेस क्रिएट और एडजस्ट कर सकते है।
Table cellspacing tag example.
<table cellspacing=”12″>
<!– write desire table content here –>
</table>
Table cellpadding tag attributes – एचटीएमएल वेब पेज में क्रिएटेड टेबल सेल टेक्स्ट कंटेंट और सेल बॉर्डर के मध्य एम्प्टी स्पेस को क्रिएट करता है, आप अपनी टेबल जरूरत के अनुसार टेबल सेल पैडिंग स्पेस को क्रिएट और एडजस्ट कर सकते है।
Table cellspadding tag example.
<table cellpadding=”18″>
<!– write desire table content here –>
</table>
Table width tag attributes – मौजूदा एचटीएमएल वेब पेज में क्रिएटेड टेबल डिफ़ॉल्ट विड्थ साइज को कम ज्यादा या एडजस्ट कर सकते है। आप अपनी जरूरत के अनुसार टेबल विड्थ को कस्टम डिफाइन कर सकते है।
Table width tag example.
<table width=”100%”>
<!– write desire table content here –>
</table>
table align tag attributes – मौजूदा एचटीएमएल वेब पेज में क्रिएटेड टेबल के टेक्स्ट इनफार्मेशन को मैन्युअली रूप से लेफ्ट,राइट,सेण्टर ऑर्डर में अलाइन कर सकते है।
Table align tag example.
<table align=”right”>
<!– write desire table content here –>
</table>
table <th> and <td> tag attributes.
Table colspan attributes – मौजूदा एचटीएमएल वेब पेज में क्रिएटेड टेबल के एक पर्टिकुलर सेल ब्लॉक को कितने कॉलम में चौड़ा या फैलाना है, यह सेटिंग्स टेबल कोलस्पेस टैग से एडजस्ट की जाती है।
Table colspan tag example.
<td colspan=”4″>It Spread Table Cell Content in 4 column </td>
table rowspan attributes – मौजूदा एचटीएमएल वेब पेज में क्रिएटेड टेबल के एक पर्टिकुलर सेल को कितने पंक्तियों में चौड़ा करना या फैलाना चाहते है, जनरलली टेबल रौस्पेन ऐट्रिब्यूट्स टेबल रौ को जरूरत के अनुसार बड़ा करता है।
Table rowspan tag example.
<td rowspan=”4″>It Spread Table Cell Content in 4 row</td>
Applying CSS styling to the created table in the HTML web page.
एचटीएमएल वेब पेज में क्रिएटेड टेबल सीएसएस स्टाइलिंग इफ़ेक्ट का उपयोग करके, आप किसी आर्डिनरी एचटीएमएल क्रिएटेड टेबल को अधिक अट्रैक्टिव थीम कलर, ऐट्रिब्यूट्स और इफ़ेक्ट को अप्लाई कर सकते हैं।
So, let’s understand some basic HTML table CSS styling.
Table styling effects in simple HTML.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Table Attributes</title>
<style>
table {
color:gray;
width: 100%;
border-collapse: collapse; /* display elegant clean table border */
}
th, td {
border: 2px solid orange;
padding: 10px;
text-align: left;
}
th {
background-color: #f213f342; /* Light pink for table header */
}
</style>
</head>
<body>
<h1><center>Html Table With Css Styling</center></h1>
<table>
<thead>
<tr>
<th>#.</th>
<th>Course Name.</th>
<th>Course Duration.</th>
<th>Course Price.</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Python Programming</td>
<td>2 Month</td>
<td>Rs – 999</td>
</tr>
<tr>
<td>2.</td>
<td>JavaScript Programming</td>
<td>2 Month</td>
<td>Rs – 1099</td>
</tr>
<tr>
<td>3.</td>
<td>Ruby Programming</td>
<td>2 Month</td>
<td>Rs – 1199</td>
</tr>
<tr>
<td>4.</td>
<td>Kotlin Programming</td>
<td>2 Month</td>
<td>Rs – 1299</td>
</tr>
</tbody>
</table>
</body>
</html>
Html table example with table cell padding.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Table Attributes</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
color:blue;
font-family:monotype corsiva; /* Display monotype corsiva font color */
font-size:1.2em;
border: 2px solid red; /* Display solid red border */
padding: 14px;
text-align: left;
font-weight: bold;
}
th {
background-color: lime; /* Display lime background color */
}
tr:nth-child(even) {
background-color: yellow; /* Display each even row with yellow color*/
}
tr:hover {
background-color: orange; /* Display orange color when mouse hover on table */
}
</style>
</head>
<body>
<h1><center>Html Table With Css Styling</center></h1>
<table>
<thead>
<tr>
<th>#.</th>
<th>Course Name.</th>
<th>Course Duration.</th>
<th>Course Price.</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Python Programming</td>
<td>2 Month</td>
<td>Rs – 999</td>
</tr>
<tr>
<td>2.</td>
<td>JavaScript Programming</td>
<td>2 Month</td>
<td>Rs – 1099</td>
</tr>
<tr>
<td>3.</td>
<td>Ruby Programming</td>
<td>2 Month</td>
<td>Rs – 1199</td>
</tr>
<tr>
<td>4.</td>
<td>Kotlin Programming</td>
<td>2 Month</td>
<td>Rs – 1299</td>
</tr>
</tbody>
</table>
</body>
</html>
Advanced Css Table Border And Spacing Styling Table Example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Table Attributes</title>
<style>
table {
border: 2px solid #888; /* display Table solid border */
}
th, td {
font-family: times new roman;
border: 3px solid #666; /* display table Cell borders */
color:brown;
font-size:1.2em;
border: 2px solid red; /* Display solid red border */
text-align: left;
font-weight: bold;
}
th {
background-color: yellow; /* Display yellow background color */
}
tr:nth-child(even) {
background-color: orange; /* Display each even row with orange color*/
}
Spacing:
table {
border-spacing: 100px; /* display cell space */
}
</style>
</head>
<body>
<h1><center>Html Table With Css Styling</center></h1>
<table>
<thead>
<tr>
<th>#.</th>
<th>Course Name.</th>
<th>Course Duration.</th>
<th>Course Price.</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Python Programming</td>
<td>2 Month</td>
<td>Rs – 999</td>
</tr>
<tr>
<td>2.</td>
<td>JavaScript Programming</td>
<td>2 Month</td>
<td>Rs – 1099</td>
</tr>
<tr>
<td>3.</td>
<td>Ruby Programming</td>
<td>2 Month</td>
<td>Rs – 1199</td>
</tr>
<tr>
<td>4.</td>
<td>Kotlin Programming</td>
<td>2 Month</td>
<td>Rs – 1299</td>
</tr>
</tbody>
</table>
</body>
</html>
