Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

Tables Border

CSS can significantly enhance the appearance of an HTML table.

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Königlich Essen	Philip Cramer	Germany
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Table Borders

To define table borders using CSS, utilize the border property.

The following example demonstrates how to specify a solid border for <table>, <th>, and <td> elements:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Example

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

Full-Width Table

In certain cases, the table above may appear small. To create a table that spans the entire screen width (full-width), apply width: 100% to the <table> element.

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Example

table {
width: 100%;
}

Double Borders: Note that the tables in the examples above have double borders.

This occurs because both the table and the <th> and <td> elements have separate borders.

To eliminate double borders, refer to the example below.

Collapse Table Borders

The border-collapse property determines whether the borders of table cells should collapse into a single border.

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Example

table {
border-collapse: collapse;
}

If you desire a border solely around the table, apply the border property exclusively to the <table> element.

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Example

table {
border: 1px solid;
}