Creating HTML Intermediate Tables

Using tables gives you the flexibility of detailing and organizing specific areas of content for your viewer. Creating Intermediate Tables uses both HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). As you know from previous tutorials, HTML is the foundational code that is used to structure a web page and its content, while CSS is used to enhance your web page with creative design aspects. 

In this tutorial, we will explore how to create intermediate tables: control the number of rows and columns, define the table width, and also combine table cells. Additionally, we will show you how to add some creative background colors to individual cells. All you need to start with is a simple code editor, such as Notepad ++, that is free.

The Essentials of an Intermediate Table

Let’s look at the simple HTML tags that are initially used to create a table.

The HTML code for a simple table will look like the following:

The output on your web page is this:

What are you missing? It would be nice to have the table outlined so that i can see the actual layout of the rows and columns. I can simply add a border tag to the table itself.

Add a Border

Now, I can see the actual table more well defined.

Add a Table Column Span (td colspan)

Another nice feature is being able to combine cells from one column to the next. I call this Column Span or td column span because we are combining table cells. As you remember from above, the <td> tag represents the table cell. You will use the colspan tag to create this feature. Notice in the following code that I have removed the third table cell since the objective is to combine two cells.

Use the following code:

The output on your web page looks like this. Notice the table cells combined into one.

Add a Row Span (td rowspan)

While the column span combines table cells across 2 or more columns, the row span simply combines cells across 2 or more rows.

Use the following code:

The output as you see here combines the table cells in the rows.

Defining Table Width

You can easily define the table width by adding a simple HTML definition. You can use percentage or pixels for defining your table width. For this example, I am adding in 600px width to make the table wider.

Now we have a wider table that also expands the table cells.

Adding Colors to Table Cells

You don’t have to live with a plain white background table when you can easily give CSS color to your background. It’s both practical and aesthetically pleasing to have color in your heading row. When doing this, make sure your text color is readable against the background color. Here, we are providing some different colors to show you some creative examples.

All I did is add a hex color to the table cell. In this case, I added it to the <th> tag which defines the heading of the table.

Now, you have a table that begins to show your creative style.

Where to Next?

This introduction to creating the Intermediate Table should provide a starting point for further inquiry into text design, layout, and practical applications with HTML and CSS. 

We’ll continue to explore other areas of design in the next blog. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.

HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!

<p><a class=”btn btn-primary” href=”https://www.udacity.com/course/intro-to-programming-nanodegree–nd000” target=”blank” rel=”noopener noreferrer”>Start Learning</a></p>