Scribd
Upload
14 views

HTML-2 (class notes)

The document provides an overview of HTML tables, including their syntax and key elements such as <table>, <tr>, <th>, and <td>. It explains how to format tables with borders, size specifications, text alignment, and the use of colspan and rowspan attributes. Additionally, it covers cell padding and spacing to enhance table presentation.

Uploaded by

cxalbxer
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
14 views

HTML-2 (class notes)

The document provides an overview of HTML tables, including their syntax and key elements such as <table>, <tr>, <th>, and <td>. It explains how to format tables with borders, size specifications, text alignment, and the use of colspan and rowspan attributes. Additionally, it covers cell padding and spacing to enhance table presentation.

Uploaded by

cxalbxer
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

WAD

2
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.

• Syntax of HTML Table

<table>
// content of the table
</table>

• Key Elements of HTML Table


<table>: Defines the table itself.
<tr>: Used for table rows.
<th>: Used for table headings.
<td>: Used for table cells (data).
• Table Cells
Each table cell is defined by a <td> and a </td> tag.
• Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
• Table Headers
Sometimes you want your cells to be table header cells. In those cases
use the <th> tag instead of the <td> tag:
Example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Neha</td>
<td>18</td>
</tr>
<tr>
<td>Jiya</td>
<td>20</td>
</tr>
</table>
Border in table
Single Border in Table
• border-collapse will make the borders collapse into a single border

Example :

<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
Size of table
Example:
<body>
<table style width=90%>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Neha</td>
<td>18</td>
</tr>
<tr>
<td>Jiya</td>
<td>20</td>
</tr>
</table>
</body>
Size of column
Example:

<body>
<table style width=90%>
<tr>
<th>Name</th>
<th style="width:30%">Age</th>
</tr>
<tr>
<td>Neha</td>
<td>18</td>
</tr>
<tr>
<td>Jiya</td>
<td>20</td>
</tr>
</table>
</body>
</html>
Size of row
<body>
<table style width=90%>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr style="height:80px">
<td>Neha</td>
<td>18</td>
</tr>
<tr>
<td>Jiya</td>
<td>20</td>
</tr>
</table>
</body>
Table headers vertically
<table style width=90%>
<tr>
<th>Name</th>
<td>Neha</td>
<td>18</td>
</tr>
<tr>
<th>Age</th>
<td>Jiya</td>
<td>20</td>
</tr>
</table>
Text align in tables

<head>
<style>
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: right;
}
</style>
</head>
COLSPAN AND ROWSPAN
Colspan: If you want a table cell to span multiple columns, you can use the colspan attribute.
Rowspan: If you want a table cell to span multiple rows, you can use the rowspan attribute.
Example of colspan:

<body>
<table style width=100%>
<tr>
<th colspan="2">Name and Age</th>
</tr>
<tr>
<td>Neha</td>
<td>18</td>
</tr>
<tr>
<td>Jiya</td>
<td>20</td>
</tr>
</table>
</body>
Example of rowspan:
<body>
<table style width=100%>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td rowspan="2">Neha , Riya</td>
<td>18</td>
</tr>
<tr>
<td>20</td>
</tr>
</table>
</body>
Cell padding
• Cell padding is the space between the cell edges and the cell content.

• By default the padding is set to 0.

<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 30px;
}
</style>
</head>
• Example:
To specify different padding for all fours sides of the cell content.

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding-top: 10px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 40px;
}
</style>
Cell Spacing
Cell spacing is the space between each cell.

By default the space is set to 2 pixels.

<head>
<style>
table, th, td {
border: 1px solid black;
}
table {
border-spacing: 20px;
}
</style>

You might also like