Skip to content

Added html-tables.md file #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 12, 2024
Merged

Added html-tables.md file #64

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
50ea52e
addded html-tables.md
Tirth-chokshi May 12, 2024
8fa2546
Merge branch 'main' of https://github.com/Tirth-chokshi/codeharborhub
Tirth-chokshi May 12, 2024
7d5d552
id changed
Tirth-chokshi May 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
210 changes: 210 additions & 0 deletions docs/html/html-tables.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
---
id: HTML Tables
title: HTML Tables
sidebar_label: HTML Tables
sidebar_position: 2
tags: [html, tables, web development, markup language, structure, data presentation, web design, web pages, websites, table attributes, table structure]
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.
---


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.

## Creating Tables

To create a table in HTML, you use the `<table>` element. This element serves as the container for all other table-related elements.

```html
<table>
<!-- Table content goes here -->
</table>
```

## Table Structure

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.
<Tabs>
<TabItem value="HTML">
```html
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
```
</TabItem>
<TabItem value="Output">
<BrowserWindow url ="http://127.0.0.1:5500/index.html">
<div>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</div>
</BrowserWindow>
</TabItem>
</Tabs>

- **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.
<Tabs>
<TabItem value="HTML">
```html
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
```
</TabItem>
<TabItem value="Output">
<BrowserWindow url ="http://127.0.0.1:5500/index.html">
<div>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</div>
</BrowserWindow>
</TabItem>
</Tabs>

- **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.

<Tabs>
<TabItem value="HTML">
```html
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
```
</TabItem>
<TabItem value="Output">
<BrowserWindow url ="http://127.0.0.1:5500/index.html">
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</BrowserWindow>
</TabItem>
</Tabs>

- **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.

<Tabs>
<TabItem value="HTML">
```html
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
```
</TabItem>
<TabItem value="Output">
<BrowserWindow url ="http://127.0.0.1:5500/index.html">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</BrowserWindow>
</TabItem>
</Tabs>

## Table Attributes

Tables and their elements support various attributes to customize their appearance and behavior. Some common attributes include:

- **border**: Specifies the border thickness of the table.
- **cellpadding**: Defines the space between the cell content and its borders.
- **cellspacing**: Sets the space between cells.

<Tabs>
<TabItem value="HTML">
```html
<table border="1" cellpadding="4" cellspacing="0">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
```
</TabItem>
<TabItem value="Output">
<BrowserWindow url ="http://127.0.0.1:5500/index.html">
<div>
<table border="1" cellpadding="4" cellspacing="0">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</div>
</BrowserWindow>
</TabItem>
</Tabs>



## Table Captions and Summaries

- **Captions**: The `<caption>` element is used to provide a title or summary for the table, which is displayed above the table.

- **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.

<Tabs>
<TabItem value="HTML">
```html
<table>
<caption>Table Caption</caption>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
```
</TabItem>
<TabItem value="Output">
<BrowserWindow url ="http://127.0.0.1:5500/index.html">
<table>
<div>
<caption>Table Caption</caption>
<!-- Table content -->
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</div>
</table>
</BrowserWindow>
</TabItem>
</Tabs>

## Conclusion

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.