Lecture
Notes On Class 8Introduction to Tables
Objective
Understand
the basic structure and components of HTML tables.
Outcome
Students
will be able to create and format basic tables, including table headers and
alignment within cells.
Introduction to HTML Tables
Tables
in HTML are used to present data in a structured format with rows and columns.
Tables are useful for displaying tabular data, such as lists, schedules, and
other organized information.
Basic Table Structure
An
HTML table is created using the <table> element. The primary components
of a table include:
1.
Table
Container: <table> -
This is the main element that holds the entire table structure.
2.
Table
Rows: <tr> - Represents a single row
in the table.
3.
Table
Data Cells: <td> -
Represents a cell in a row that contains data.
4.
Table
Header Cells:
<th> - Represents a cell in the header row with bold, centered text.
Basic Syntax
Here’s
a simple example of an HTML table:
|
<!DOCTYPE html> <html> <head> <title>Basic HTML
Table</title> </head> <body> <table
border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr> </table> </body> </html> |
Explanation:
- <table border="1">: Creates a
table with a border of 1 pixel.
- <tr>: Defines a row in the table.
- <th>: Defines a header cell in the table
(bold and centered by default).
- <td>: Defines a standard data cell in
the table.
Adding Table Attributes
You
can enhance the table’s appearance and functionality using attributes:
- border: Adds a border around the table cells.
Example: <table border="1">.
- cellpadding: Adds space between the cell
content and the cell border. Example: <table
cellpadding="10">.
- cellspacing: Adds space between the cells.
Example: <table cellspacing="5">.
Example
with Attributes
|
<!DOCTYPE html> <html> <head> <title>Table with
Attributes</title> </head> <body> <table border="2"
cellpadding="10" cellspacing="5"> <tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr> </table> </body> </html> |
Formatting Table Data
- Aligning Text: You can align text within table cells using
the align attribute for <td> and <th> tags (though this
attribute is deprecated in HTML5). Use CSS for better control:
td, th {
text-align: center; /* Center-aligns text */
}
- Column Spanning: Use the colspan attribute to make a cell
span multiple columns:
<td colspan="2">Spans two columns</td>
- Row Spanning: Use the rowspan attribute to make a cell span multiple rows:
<td rowspan="2">Spans two rows</td>
Summary
HTML
tables are essential for organizing and displaying data in a grid format. By
using the <table>, <tr>, <th>, and <td> tags, you can
create tables that include headers and data cells. Additional attributes and
CSS can be used to customize the appearance and formatting of tables.