Lecture Notes

Section 1: Introduction

Course Objectives

Section 2: CSS Development

Introduction to CSS
Parts of a CSS Rule
Types of CSS Rules
CSS - Color Names and Codes
CSS Classes and Spans
CSS Divisions - DIVs
CSS IDs
CSS Margins
CSS Padding
CSS Text Properties
CSS Font Properties
CSS Borders
CSS Backgrounds
CSS Transparency
CSS Text on Top of Images
CSS Width and Height Properties
CSS Display Properties
CSS Static Positioning
CSS Relative Positioning
CSS Absolute Positioning
CSS Fixed Positioning
CSS Float Property
CSS Clear Property
CSS Z-Index
CSS Styling Links
CSS Tables
CSS Project - Introduction
CSS Project - CSS Rules
CSS Project - Navigation Rules
CSS Project - Responsive CSS
CSS Project - Page Elements
×
More

Lecture Notes

Course: CSS Fundamentals View Course Outline


Created by:

YouAccel

Lectures:

32

Duration:

1h 47m 20s

Skill Level:

Beginner

Language:

English

Students Enrolled:

11,386

Rating:

(86)

Certification Type:

Completion Certificate

Lecture: CSS Tables

We can greatly improve the look, styling and responsiveness of an HTML table by using CSS tables.

Here we have an example of a CSS table with some basic formatting.

On the left, let's take a look at the way the code is structured.

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid #ddd;
text-align: left;
}

table {
border-collapse: collapse;
width: 100%;
}

th, td {
padding: 15px;
}

tr:hover {
background-color: cyan;
}

</style>
</head>
<body>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Grade</th>
</tr>
<tr>
<td>John</td>
<td>Smith</td>
<td>A</td>
</tr>
<tr>
<td>Ted</td>
<td>Evans</td>
<td>B</td>
</tr>
<tr>
<td>Joe</td>
<td>Black</td>
<td>C</td>
</tr>
<tr>
<td>Mable</td>
<td>Brown</td>
<td>D</td>
</tr>
</table>

</body>
</html>

In between the <table></table> tags, we have the <tr>, <th> and <td> tags.

As with html tables the <tr> and <td> tags represent a table row and table column.

The <th> tag, represents a table heading.

This makes styling the headings of your table much more convenient.

The Style sheet has three style definitions.

The first will apply a one pixel border to the table, table column and table headings. The text alignment is also set to left.

Next, we have a border collapse property set to the table - style rule.
This collapses the table borders into a single border.

The next style rule adds 15px padding around our table headers and table columns.

Lastly, we've added a hover effect to our table rows, using the tr:hover property.

As we hover our mouse over the rows, the background changes to cyan.