Creating Tables

Today you will learn how to create tables using HTML and CSS and will practice doing them.

A table is just another way to organize content on your webpage. You will use HTML to create the table and CSS to add style elements, like table headlines, colors, and borders.

Table Examples

Here are a couple of examples of tables from the school webpage:

Without borders (images of all of the schools):

http://www.medfordpublicschools.org/

With borders:

http://www.medfordpublicschools.org/schools/andrews-middle-school/student-services/library-and-media-center/

With borders, images, and table headers:

http://www.medfordpublicschools.org/schools/andrews-middle-school/student-services/library-and-media-center/educational-databases/

Tables are good for displaying certain kinds of content on a page. I wouldn’t recommend using them as the structure for an entire page. Remember, the more code you have on your page, the longer it generally takes for a browser to load it all.

How to Create Tables

Each row is tr

Content inside each row, table cells, are td

The table below illustrates how your content will be organized in a table. Your tables won’t have visible borders unless you use CSS to specify them in your code. We will go over this.

To practice creating a basic table:

Click here to download and save a practice page you will be working with.

We will work with this page for the next couple of classes and then will have another table page with examples of tables with style sheets.