Scribd
Upload
230 views5 pages

HTML Tables Tutorial

The document discusses HTML tables and how to structure and style them using various HTML and CSS elements. It defines the <table>, <tr>, <td>, and <th> elements to define the table, rows, cells, and headings. It provides examples of how to use CSS properties like border, border-collapse, padding, text-align, and border-spacing to control the appearance and layout of tables. It includes three exercises demonstrating a basic table, a zebra-striped table, and a responsive table with horizontal scrolling.

Uploaded by

Lesley Broadwood
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
230 views5 pages

HTML Tables Tutorial

The document discusses HTML tables and how to structure and style them using various HTML and CSS elements. It defines the <table>, <tr>, <td>, and <th> elements to define the table, rows, cells, and headings. It provides examples of how to use CSS properties like border, border-collapse, padding, text-align, and border-spacing to control the appearance and layout of tables. It includes three exercises demonstrating a basic table, a zebra-striped table, and a responsive table with horizontal scrolling.

Uploaded by

Lesley Broadwood
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 5

i

HTML Tables
An HTML table is defined with the <table> tag. Each table row is defined with the <tr>
tag. A table header is defined with the <th> tag. By default, table headings are bold and
centered. A table data/cell is defined with the <td> tag.

Use the HTML <table> element to define a table


Use the HTML <tr> element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
Use the HTML <caption> element to define a table caption
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding Add padding to cells (space between the cell content
and its borders)
Use the CSS text-align Align text in a cell
Use the CSS border-spacing Sets the spacing between cells
Use the colspan Make a cell span many columns
Use the rowspan Make a cell span many rows
Use the id attribute to uniquely define one table

Collapsed Border - CSS border-collapse property


Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

Cell Padding - CSS padding property


Example
th, td {
padding: 15px;
}

Left-align Headings

By default, table headings are bold and centered.

Example
th {
text-align: left;
}

1
Adding Border Spacing - CSS border-spacing

Border spacing specifies the space between the cells.

Example
table {
border-spacing: 5px;
}

Exercise 1 – basic table with border Key the following into Notepad++

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<h2>Basic HTML Table</h2>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

2
Exercise 2 - Zebra Striped Table

For zebra-striped tables, use the nth-child() selector and add a background-color to all
even (or odd) table rows:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}

th, td {
text-align: left;
padding: 16px;
}

tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>

<h2>Zebra Striped Table</h2>


<p>For zebra-striped tables, use the nth-child() selector and add a background-color to
all even (or odd) table rows:</p>

<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
3
</tr>
</table>

</body>
</html>

Exercise 3 - Responsive Table


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
border-spacing: 10;
width: 100%;
border: 5px solid #ddd;
}

th, td {
text-align: left;
padding: 5px;
}

tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>

<h2>Responsive Table</h2>
<p>If you have a table that is too wide, you can add a container element with overflow-
x:auto around the table, and it will display a horizontal scroll bar when needed.</p>
<p>Resize the browser window to see the effect. Try to remove the div element and see
what happens to the table.</p>

<div style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
4
<td>50</td>
<td>50</td>
<td>50</td>

</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>

</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>

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

Figure 1-Responsive Table (exercise 3) sample

i
www.w3schools.com

You might also like