Scribd
Upload
16 views3 pages

Tables in HTML

The document provides an overview of HTML tables, explaining how to create them using the <table>, <tr>, <th>, and <td> tags. It details various attributes such as border, cellpadding, cellspacing, colspan, rowspan, align, bgcolor, and caption that can be used to style and structure tables. Additionally, it includes examples demonstrating the use of these attributes in a practical context.

Uploaded by

nisha1091983
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views3 pages

Tables in HTML

The document provides an overview of HTML tables, explaining how to create them using the <table>, <tr>, <th>, and <td> tags. It details various attributes such as border, cellpadding, cellspacing, colspan, rowspan, align, bgcolor, and caption that can be used to style and structure tables. Additionally, it includes examples demonstrating the use of these attributes in a practical context.

Uploaded by

nisha1091983
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

APEEJAY SCHOOL, SAKET

CLASS 8
HANDOUTS
TABLES IN HTML
Tables allow you to arrange data into rows and columns on a web page, making it easy to
display information like schedules, statistics, or other structured data in a clear format.

What is an HTML Table?


An HTML table is created using the <table> tag. Inside this tag, you use following tags
<tr> to define table rows,
<th> for table headers, and
<td> for table data cells
All these are container tags
Each <tr> represents a row, and within each row, <th> or <td> tags represent the cells in that
row, which can contain text, images, lists, or even another table.
For Example:
<html>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Output:

ATTRIBUTES OF TABLE ELEMENT


1. Border - The border attribute determines the width of the border around the table and
its cells. By default, it is set to 1, making a noticeable border.
2. Cellpadding and Cellspacing Attributes - The cellpadding attribute characterizes the
space between a cell's substance and its border, while cellspacing decides the space
between cells.
3. Width and Height Attributes - You can set the width and height attributes to
characterize the general width and height of the table.
4. Colspan and Rowspan Attributes – To make a cell span more than one column, we use
colspan where as to make a cell span more tan one row, we use rowspan .
5. Align attribute - The align attribute aligns the substance of a phone horizontally, while
valign aligns it vertically.
6. Bgcolor: The bgcolor attribute sets the background shade of a table or individual cells.
7. Bordercolor = sets or retrieves the border colour of the table.
8. Caption – provides a title or description of the table.
EXAMPLE

<HTML>

<HEAD><TITLE>TABLES</TITLE></HEAD>

<BODY bgcolor = "yellow">

<h2>HTML Table with Colspan, Rowspan, and Styling</h2>

<table border = 4 align = "center" cellspacing="5">

<!-- Cellspacing adds space between table cells -->

<tr> <th colspan="3">Student Report</th> <!-- Merging 3 columns -->

</tr> <tr>

<th>Student Name</th>

<th>Subject</th>

<th>Marks</th>

</tr> <tr> <td rowspan="2">John</td> <!-- Merging 2 rows -->

<td>Math</td>

<td>85</td>

</tr> <tr>

<td>Science</td>

<td class="highlight">90</td> <!-- Highlighting a cell -->

</tr> <tr>

<td>Emma</td>

<td colspan="2">Absent</td> <!-- Merging 2 columns -->

</tr> </table></body></html>

You might also like