CSS Lesson 9: Tables

0
14

Introduction to CSS Tables

So far, you’ve seen many tables used in our tutorials, and you’ll continue to see them throughout our lessons. We taught you how to create them in Tables Lesson of HTML. Don’t worry, we aren’t going to repeat all that stuff, but let’s revisit it for a moment in case you forgot.

A table consists of a heading, row and columns. In this lesson we will teach you how to make a selection of table elements as a CSS selector. Also, you’ll learn how to set color, height/width, and alignment in a table using CSS.

[tooltip]┬áTables don’t have special CSS properties like text, font, list etc., so you’re free to use different properties to design a table.[/tooltip]

Color – Tables

You can use the color and background-color properties to make a table colorful!

Source Code Output

 

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

Table border

Let’s define the border in a table. A border can be defined in numeric numbers (1, 2, etc) and values (px, em, pt).

Source Code Output

Column 1 Column 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

Don’t be confused about the border’s shorthand trick. You’ll learn about borders in detail later on, but here you can get a basic understanding.

Border collapsed

You might have noticed in the previous example that there are two borders in a table. It’s because we define separate borders for table as well as th/td. But here you’ll learn how to set a single border.

Source Code Output

Column 1 Column 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

Text Align

Now let’s talk about the text of the table, so you can align the text of the table to the center, left or right. You can use the text-align property which you learned in the CSS Text Lesson.

Height and width

A table Height and Width can be set in % and px. Normally, a table height and width is set on 100%, which means the table will adjust itself according to the content. However, you can also divide the table rows and columns evenly. Here is a demonstration:

Summary

  • Design Table with CSS table properties
  • Use the CSS Color property to set text color and CSS Background-color property to set background color of cell.
  • Set your table height with CSS height and width with the CSS width property.
  • Define table borders with the border property.
  • Use the border-collapse property to collapse or separate the borders.
  • Use the text-align property to define text alignment.

Next Lesson

You saw a short demonstration of borders in this lesson, and we will soon give you a more complete understanding about using borders. But first, let’s study about the CSS Box Model

Leave a Reply