Skip to content

Commit 6a8c019

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #64 from Tirth-chokshi/main
Added html-tables.md file
2 parents 62c6f88 + 7d5d552 commit 6a8c019

File tree

1 file changed

+210
-0
lines changed

1 file changed

+210
-0
lines changed

‎docs/html/html-tables.md

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
---
2+
id: html-tables
3+
title: HTML Tables
4+
sidebar_label: HTML Tables
5+
sidebar_position: 2
6+
tags: [html, tables, web development, markup language, structure, data presentation, web design, web pages, websites, table attributes, table structure]
7+
description: This guide will introduce you to HTML tables, their importance, and how to use them to organize data on web pages. You'll learn about creating tables, structuring rows and columns, and customizing tables with HTML attributes.
8+
---
9+
10+
11+
HTML tables are used to organize and display data in a tabular format on web pages. With tables, you can present data in rows and columns, making it easier for users to read and understand the information. Tables are versatile and can be used for various purposes, such as displaying statistical data, creating forms, or arranging content in a structured layout.
12+
13+
## Creating Tables
14+
15+
To create a table in HTML, you use the `<table>` element. This element serves as the container for all other table-related elements.
16+
17+
```html
18+
<table>
19+
<!-- Table content goes here -->
20+
</table>
21+
```
22+
23+
## Table Structure
24+
25+
A table is structured into rows and columns, and can include headers for columns or rows. These elements are essential for organizing data within the table.
26+
<Tabs>
27+
<TabItem value="HTML">
28+
```html
29+
<table>
30+
<tr>
31+
<th>Header 1</th>
32+
<th>Header 2</th>
33+
</tr>
34+
<tr>
35+
<td>Data 1</td>
36+
<td>Data 2</td>
37+
</tr>
38+
</table>
39+
```
40+
</TabItem>
41+
<TabItem value="Output">
42+
<BrowserWindow url ="http://127.0.0.1:5500/index.html">
43+
<div>
44+
<table>
45+
<tr>
46+
<th>Header 1</th>
47+
<th>Header 2</th>
48+
</tr>
49+
<tr>
50+
<td>Data 1</td>
51+
<td>Data 2</td>
52+
</tr>
53+
</table>
54+
</div>
55+
</BrowserWindow>
56+
</TabItem>
57+
</Tabs>
58+
59+
- **Rows** : The `<tr>` element defines a table row. It acts as a container for table cells, which can be either table data cells (`<td>`) or table header cells (`<th>`). Rows are used to group together logical sets of data or to define lines of table headers.
60+
<Tabs>
61+
<TabItem value="HTML">
62+
```html
63+
<tr>
64+
<td>Data 1</td>
65+
<td>Data 2</td>
66+
</tr>
67+
```
68+
</TabItem>
69+
<TabItem value="Output">
70+
<BrowserWindow url ="http://127.0.0.1:5500/index.html">
71+
<div>
72+
<tr>
73+
<td>Data 1</td>
74+
<td>Data 2</td>
75+
</tr>
76+
</div>
77+
</BrowserWindow>
78+
</TabItem>
79+
</Tabs>
80+
81+
- **Columns**: The `<td>` element represents a table data cell in a row, containing the actual data. Columns are created by adding `<td>` or `<th>` elements within `<tr>` elements. Each `<td>` or `<th>` in a row represents a column.
82+
83+
<Tabs>
84+
<TabItem value="HTML">
85+
```html
86+
<tr>
87+
<td>Data 1</td>
88+
<td>Data 2</td>
89+
</tr>
90+
```
91+
</TabItem>
92+
<TabItem value="Output">
93+
<BrowserWindow url ="http://127.0.0.1:5500/index.html">
94+
<tr>
95+
<td>Data 1</td>
96+
<td>Data 2</td>
97+
</tr>
98+
</BrowserWindow>
99+
</TabItem>
100+
</Tabs>
101+
102+
- **Headers**: The `<th>` element is used for table header cells, which typically contain titles or labels for the columns or rows. Headers help users understand the data presented in the table. They can be used at the top of columns or at the beginning of rows, depending on how the table is organized.
103+
104+
<Tabs>
105+
<TabItem value="HTML">
106+
```html
107+
<tr>
108+
<th>Header 1</th>
109+
<th>Header 2</th>
110+
</tr>
111+
<tr>
112+
<td>Data 1</td>
113+
<td>Data 2</td>
114+
</tr>
115+
```
116+
</TabItem>
117+
<TabItem value="Output">
118+
<BrowserWindow url ="http://127.0.0.1:5500/index.html">
119+
<tr>
120+
<th>Header 1</th>
121+
<th>Header 2</th>
122+
</tr>
123+
<tr>
124+
<td>Data 1</td>
125+
<td>Data 2</td>
126+
</tr>
127+
</BrowserWindow>
128+
</TabItem>
129+
</Tabs>
130+
131+
## Table Attributes
132+
133+
Tables and their elements support various attributes to customize their appearance and behavior. Some common attributes include:
134+
135+
- **border**: Specifies the border thickness of the table.
136+
- **cellpadding**: Defines the space between the cell content and its borders.
137+
- **cellspacing**: Sets the space between cells.
138+
139+
<Tabs>
140+
<TabItem value="HTML">
141+
```html
142+
<table border="1" cellpadding="4" cellspacing="0">
143+
<tr>
144+
<th>Header 1</th>
145+
<th>Header 2</th>
146+
</tr>
147+
<tr>
148+
<td>Data 1</td>
149+
<td>Data 2</td>
150+
</tr>
151+
</table>
152+
```
153+
</TabItem>
154+
<TabItem value="Output">
155+
<BrowserWindow url ="http://127.0.0.1:5500/index.html">
156+
<div>
157+
<table border="1" cellpadding="4" cellspacing="0">
158+
<tr>
159+
<th>Header 1</th>
160+
<th>Header 2</th>
161+
</tr>
162+
<tr>
163+
<td>Data 1</td>
164+
<td>Data 2</td>
165+
</tr>
166+
</table>
167+
</div>
168+
</BrowserWindow>
169+
</TabItem>
170+
</Tabs>
171+
172+
173+
174+
## Table Captions and Summaries
175+
176+
- **Captions**: The `<caption>` element is used to provide a title or summary for the table, which is displayed above the table.
177+
178+
- **Summaries**: Although not represented by a specific HTML element, summaries can be provided using the `summary` attribute (deprecated in HTML5) or through other means such as a paragraph before or after the table to describe its purpose or content for users and search engines.
179+
180+
<Tabs>
181+
<TabItem value="HTML">
182+
```html
183+
<table>
184+
<caption>Table Caption</caption>
185+
<tr>
186+
<td>Data 1</td>
187+
<td>Data 2</td>
188+
</tr>
189+
</table>
190+
```
191+
</TabItem>
192+
<TabItem value="Output">
193+
<BrowserWindow url ="http://127.0.0.1:5500/index.html">
194+
<table>
195+
<div>
196+
<caption>Table Caption</caption>
197+
<!-- Table content -->
198+
<tr>
199+
<td>Data 1</td>
200+
<td>Data 2</td>
201+
</tr>
202+
</div>
203+
</table>
204+
</BrowserWindow>
205+
</TabItem>
206+
</Tabs>
207+
208+
## Conclusion
209+
210+
HTML tables are a powerful tool for web developers to present data in a structured and organized manner. By understanding how to create tables, structure rows and columns, and utilize table attributes, you can enhance the readability and usability of your web pages. Remember to use tables for tabular data presentation and consider accessibility and responsive design practices to ensure your tables work well across all devices.

0 commit comments

Comments
 (0)