Chapter 11HTML Tutorial~1 min read
HTML Tables
table, tr, th, td, colspan, rowspan
HTML Tables मध्ये data rows आणि columns मध्ये organized दाखवता येतो. Text, images, links — सगळे table cells मध्ये ठेवता येतात.
Table चे मुख्य Elements
- ▸<table> — Table define करतो
- ▸<tr> — Table Row (horizontal ओळ)
- ▸<th> — Table Header (bold + centered, column/row चे name)
- ▸<td> — Table Data (actual data cell)
Basic Table — उदाहरण
html
<table border="1">
<!-- Header Row -->
<tr>
<th>नाव</th>
<th>शहर</th>
<th>Marks</th>
</tr>
<!-- Data Rows -->
<tr>
<td>Rahul Patil</td>
<td>Pune</td>
<td>85</td>
</tr>
<tr>
<td>Priya Desai</td>
<td>Mumbai</td>
<td>92</td>
</tr>
<tr>
<td>Amit Shinde</td>
<td>Nagpur</td>
<td>78</td>
</tr>
</table>colspan — Multiple Columns Span
colspan attribute एका cell ला multiple columns पर्यंत पसरवतो.
colspan — उदाहरण
html
<table border="1">
<tr>
<!-- हा cell 2 columns पर्यंत पसरतो -->
<td colspan="2">Merged Columns</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>rowspan — Multiple Rows Span
rowspan — उदाहरण
html
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<!-- हा cell 2 rows पर्यंत पसरतो -->
<td rowspan="2">Merged Rows</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
</tr>
</table>📌
Modern web development मध्ये table फक्त tabular data साठी वापरतात. Layout बनवण्यासाठी table वापरणे हे outdated practice आहे — त्यासाठी CSS Flexbox किंवा Grid वापरतात.
✅ Key Points — लक्षात ठेवा
- ▸<table> → <tr> → <th>/<td> — हा hierarchy follow करा
- ▸<th> = header cell (bold, centered) | <td> = data cell
- ▸colspan = cell किती columns पसरेल | rowspan = किती rows
- ▸border="1" attribute तात्पुरते border दाखवतो (styling साठी CSS वापरा)
- ▸Tables = tabular data साठी. Page layout साठी नाही.
0/13 chapters पूर्ण