Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
69 views

Table HTML Example

The document provides examples of how to format HTML tables using CSS properties such as borders, padding, alignment, spanning cells, and captions. It demonstrates adding borders, collapsed borders, cell padding, left-aligned headings, border spacing, cells spanning columns and rows, and a caption to an HTML table. The last example shows how to add a background color to an entire table.

Uploaded by

Gaurav Dubey
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
69 views

Table HTML Example

The document provides examples of how to format HTML tables using CSS properties such as borders, padding, alignment, spanning cells, and captions. It demonstrates adding borders, collapsed borders, cell padding, left-aligned headings, border spacing, cells spanning columns and rows, and a caption to an HTML table. The last example shows how to add a background color to an entire table.

Uploaded by

Gaurav Dubey
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

Defining Tables in HTML

Example:

<!DOCTYPE html>

<html>

<body>

<table style="width:100%">

<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:
1. Adding a border to a HTML Table: A border is set using the CSS border
property. If you do not specify a border for the table, it will be displayed without borders.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

</style>

</head>

<body>

<table style="width:100%">

<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:
2. Adding Collapsed Borders in a HTML Table: For borders to collapse into one
border, add the CSS border-collapse property.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

</style>

</head>

<body>

<table style="width:100%">

<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:
3.Adding Cell Padding in a HTML Table: Cell padding specifies the space
between the cell content and its borders.If we do not specify a padding, the table cells will be
displayed without padding.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 20px;

</style>

</head>

<body>

<table style="width:100%">

<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:
4.Adding Left Align Headings in a HTML Table : By default the table headings
are bold and centered. To left-align the table headings,we must use the CSS text-align property.

Syntax:

Example:

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 20px;

th {

text-align: left;

</style>

</head>

<body>
<table style="width:100%">

<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:

5.Adding Border Spacing in a HTML Table: Border spacing specifies the space
between the cells. To set the border spacing for a table,we must use the CSS border-spacing
property.

syntax

Example:

<html>

<head>

<style>
table, th, td {

border: 1px solid black;

table {

border-spacing: 5px;

</style>

</head>

<body>

<table style="width:100%">

<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:
6.Adding Cells that Span Many Columns in HTMl Tables : To make a cell
span more than one column, we must use the colspan attribute.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 5px;

text-align: left;

</style>

</head>

<body>

<h2>Cell that spans two columns:</h2>

<table style="width:100%">

<tr>

<th>Name</th>

<th colspan="2">Telephone</th>

</tr>
<tr>

<td>Vikas Rawat</td>

<td>9125577854</td>

<td>8565557785</td>

</tr>

</table>

</body>

</html>

Output:
7.Adding Cells that Span Many Rows in HTML Tables: To make a cell span
more than one row,we must use the rowspan attribute:

Example:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 5px;

text-align: left;

</style>

</head>

<body>

<h2>Cell that spans two rows:</h2>

<table style="width:100%">

<tr>

<th>Name:</th>

<td>Vikas Rawat</td>

</tr>

<tr>
<th rowspan="2">Telephone:</th>

<td>9125577854</td>

</tr>

<tr>

<td>8565557785</td>

</tr>

</table>

</body>

</html>

Output:
8.Adding a Caption in a HTML Table: To add a caption to a table, we must use the
“caption” tag.

Example:

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 20px;

th {

text-align: left;

</style>

</head>

<body>

<table style="width:100%">
<caption>DETAILS</caption>

<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:

9.Adding a Background Colour To a Table in HTML: A color can be added as


a background in HTML table using the “background-color” option.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {
border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 5px;

text-align: left;

table#t01 {

width: 100%;

background-color: #f2f2d1;

</style>

</head>

<body>

<table style="width:100%">

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

<br />

<br />

<table id="t01">

<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:
10.Creating Nested Tables in HTML: Nesting tables simply means making a Table
inside another Table. Nesting tables can lead to complex tables layouts, which are visually
interesting and have the potential of introducing errors.

Example:

<!DOCTYPE html>

<html>

<body>

<table border=5 bordercolor=black>

<tr>

<td>

Fisrt Column of Outer Table

</td>

<td>

<table border=5 bordercolor=grey>

<tr>

<td>

First row of Inner Table

</td>

</tr>

<tr>

<td>

Second row of Inner Table

</td>

</tr>

</table>

</td>

</tr>
</table>

</body>

</html>

Output:

You might also like