मैं शीर्ष पर एक कैप्शन के साथ एक HTML तालिका और नीचे एक क्षैतिज रेखा दिखाना चाहता हूं, जैसे:
मैं इसे लागू करने के दो तरीके देखता हूं, लेकिन दोनों के अपने-अपने नुकसान हैं। पहली विधि इस प्रकार है:
<table>
<caption><b>***** yada yada yada *****</b></caption>
<tr>
<th></th>
<th>lorem</th>
<th>ipsum</th>
<th>dolor</th>
<th>sit</th>
<th>amet</th>
</tr>
<tr>
<th>hello</th>
<td>note</td>
<td>the</td>
<td>hori</td>
<td>zontal</td>
<td>line</td>
</tr>
<tr>
<th>world</th>
<td>under</td>
<td>neath:</td>
<td>2nd</td>
<td>caption??</td>
<td>tfoot??</td>
</tr>
<tfoot>
<tr>
<td colspan="6">
<hr>
</td>
</tr>
</tfoot>
</table>मुझे इसके बारे में जो पसंद नहीं है वह यह है कि मुझे colspan विशेषता का उपयोग करना होगा; आप जानते हैं, वास्तविक तालिका डेटा से उत्पन्न होती है, और कोलस्पैन का पता लगाने का अर्थ है कि मुझे कुछ अतिरिक्त जावास्क्रिप्ट लिखना है, अगर मैं इसे इस तरह करता हूं।
दूसरा तरीका इस प्रकार होगा:
<table>
<caption><b>***** yada yada yada *****</b></caption>
<caption style="caption-side: bottom;">
<hr>
</caption>
<tr>
<th></th>
<th>lorem</th>
<th>ipsum</th>
<th>dolor</th>
<th>sit</th>
<th>amet</th>
</tr>
<tr>
<th>hello</th>
<td>note</td>
<td>the</td>
<td>hori</td>
<td>zontal</td>
<td>line</td>
</tr>
<tr>
<th>world</th>
<td>under</td>
<td>neath:</td>
<td>2nd</td>
<td>caption??</td>
<td>tfoot??</td>
</tr>
</table>टफ़ुट के बजाय कैप्शन का उपयोग करके, मुझे कोलस्पैन देने की ज़रूरत नहीं है, जो कि अच्छा है। लेकिन तालिका में पहले से ही एक कैप्शन है, और दूसरा कैप्शन कल्पना के अनुरूप नहीं है।
दूसरी विधि सरल है और मेरे द्वारा परीक्षण किए गए सभी ब्राउज़रों में ठीक दिखती है, इसलिए मैं इसे पसंद कर रहा हूं - ऐसा लगता है कि ब्राउज़र बहुत सारे 'सार्थक उल्लंघन' को संभालने में सक्षम हैं। लेकिन इस तरह 'शरारती' होना 100% सहज नहीं लगता।
Q1: क्या tfoot और colspan के बिना ऐसा करने का कोई तरीका है, जबकि एक ही समय में विशिष्टताओं का अनुपालन किया जा रहा है?
Q2: क्या उपरोक्त विधियाँ वास्तव में सभी ब्राउज़रों में समान दिखती हैं?
4 जवाब
Q1: क्या tfoot और colspan के बिना ऐसा करने का कोई तरीका है, जबकि एक ही समय में विशिष्टताओं का अनुपालन किया जा रहा है?
हां, CSS के साथ अपनी स्टाइलिंग करें। HTML एक सिमेंटिक भाषा है।
Q2: क्या उपरोक्त विधियाँ वास्तव में सभी ब्राउज़रों में समान दिखती हैं?
किसी भी आधुनिक, मानकों के अनुरूप ग्राहक में, हाँ वे करेंगे।
साथ ही, <b> तत्व का उपयोग विशुद्ध रूप से शैलीगत उद्देश्यों के लिए नहीं किया जाना चाहिए। यह जोर देने के लिए एक अर्थपूर्ण टैग है। स्टाइलिंग सीएसएस के साथ की जानी चाहिए (नीचे दिखाया गया है)।
table { border-bottom: 1px solid black; }
caption { font-weight:bold; }<table>
<caption>***** yada yada yada ****</caption>
<tr>
<th></th>
<th>lorem</th>
<th>ipsum</th>
<th>dolor</th>
<th>sit</th>
<th>amet</th>
</tr>
<tr>
<th>hello</th>
<td>note</td>
<td>the</td>
<td>hori</td>
<td>zontal</td>
<td>line</td>
</tr>
<tr>
<th>world</th>
<td>under</td>
<td>neath:</td>
<td>2nd</td>
<td>caption??</td>
<td>tfoot??</td>
</tr>
</table><!DOCTYPE html>
<html>
<head>
<title>HTML colspan Attribute</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
text-align: center;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">Table Design</h1>
<h2>HTML colspan & Rowspan Attribute</h2>
<table>
<tr>
<th colspan="2">Name</th>
<th colspan="2">Phone</th>
<th colspan="2">Address</th>
</tr>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Home</td>
<td>Office</td>
<td>Present</td>
<td>Parmanent</td>
</tr>
<tr>
<td>Sayeed</td>
<td>Dev</td>
<td>017597383</td>
<td>01784763</td>
<td>BD</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Sayeed</td>
<td>Dev</td>
<td colspan="2">017597383</td>
<td colspan="2">USA</td>
</tr>
<tr>
<td rowspan="2">Sayeed</td>
<td >Dev</td>
<td >017597383</td>
<td >017597383</td>
<td rowspan="2">USA</td>
<td >Dhaka</td>
</tr>
<tr>
<td>Dev</td>
<td >017597383</td>
<td >017597383</td>
<td >Dhaka</td>
</tr>
</table>
</center>
</body>
</html> Q2: क्या उपरोक्त विधियाँ वास्तव में सभी ब्राउज़रों में समान दिखती हैं?
नहीं, वे नहीं करते। tfoot में घंटा कुछ पिक्सेल छोटा होता है, जो कैप्शन में hr की तुलना में छोटा होता है, '1px सॉलिड ब्लैक' की लाइन मोटाई वास्तव में hr के समान लाइन मोटाई नहीं होती है, और साथ ही, लंबवत रिक्ति कुछ पिक्सेल से भिन्न होती है ( कई नहीं) 3 समाधानों के बीच।
लेकिन हाँ, मैं सहमत हूँ, आपको इसे CSS के साथ करना चाहिए, और hr का बिल्कुल भी उपयोग नहीं करना चाहिए।
बस border-bottom को table एलिमेंट में जोड़ें।
table {
border-bottom: 1px solid;
}<table>
<caption>caption</caption>
<thead>
<tr>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
</tbody>
</table>