HTML Table: Web Development Tutorial Series Part 10

Html Table

The Html Table

In this lesson, we’ll be working with the Html table. Html tables are used to group together all sorts of data types. Your Html table can consist of text, images, links, lists, more tables, and so on. Let’s start off our examples with a very basic table. See the images below. NOTE: CSS will be used throughout this lesson to add some style to our table. To learn more about CSS click here: INTRODUCTION TO CSS.

index.html Example 1: BASIC HTML TABLE

Html Table Code

Displayed Page Example 1

Html Tables Displayed

A basic Html table consists of <table></table>, <tr></tr>, <th></th>, and <td></td> tags, but other ELEMENTS and styles can be added to create complex tables. Below is a brief explanation of each of the Html table’s TAGS.

<table></table> Defines a table.
<th></th> Defines a header cell in an Html table.
<tr></tr> Defines a row in an Html table.
<td></td> Defines a cell for “table data” in an Html table.

In the index.html document, we have created a three row by three column table with a table header row. Text in a header cell will automatically be bold and centered. You should also take notice of the INDENTING in the Html document as well. We indent with two spaces before the table row and two more spaces for the table header and table data cells. This makes the code a lot more organized and readable. It’s important to know that indenting should be done with two spaces and not the tab button. This is considered good coding practice. Before we add more content to the table, let’s add a little bit of style with CSS to spice it up. We will use the my-styles.css external stylesheet for our CSS code. If you need to learn how to create the stylesheet and link the Html document to it, click here: WEBSITE FOLDER SETUP WITH AN EXTERNAL STYLESHEET. Refer to the next set of images, for example, 2. NOTE: The first image shows the link to the stylesheet from the index.html document.

index.html Example 2: LINKING TO THE MY-STYLE.CSS STYLESHEET

Html Tables Link To CSS Stylesheet

my-styles.css Example 2: ADDING STYLE TO THE HTML TABLE

html table border css

Displayed Page Example 2

html table display

The first image simply shows where the stylesheet link goes in the index.html document, and what it looks like. Moving on to the my-styles.css document, we add some style to the table with two CSS rules. The first rule targets the table, th, and td. It gives them a 1-pixel, solid blue BORDER, and a font of arial. The second rule targets the th and td again. It specifies that we want a 5-pixel padding inside each table header and table data cell. PADDING is the space between the text and border. The main reason for using CSS in this Html lesson is that there are a few design properties in CSS that go hand in hand with the table element. For example, you may have noticed the space between the borders that we added. The border-collapse: collapse; property could be used in the CSS code to remove this space by collapsing the borders. We’ll use this in the next example. The best thing about CSS is that you don’t have to know every single property, value, selector, etc.; you can learn just a few useful COLOR and spacing properties to apply to your Html elements at first, and then expand on your CSS knowledge. We are going to adjust the table cells and add some more style in the next example. See the images below.

index.html Example 3: HTML TABLE COLSPAN ATTRIBUTE

Html table colspan and width

my-styles.css Example 3: HTML TABLE COLSPAN ATTRIBUTE

html tables css border-collapse

Displayed Page Example 3

html table with tr:nth-child(even) display

Before we start, I want to be the first to point out that there are much better ways to write CSS code. But for the purposes of learning and the fact that this is an Html Tutorial Series, we are going to leave it as it is. We have added a few ATTRIBUTES to the index.html document and have combined the Job Title and Yearly Salary table headers into one cell. With the colspan attribute, this combined header will span the length of two columns. See below.

<table style=”width: 100%;”> We add the style attribute to our opening table tag and specify a width of 100 percent of the browser screen for the table.
<th colspan=”2″> Makes the table header cell span across 2 columns.

In my-style.css, we have added two more declarations to the previous rules and two brand new CSS rules. All of the new CSS code affects the style of the table. See below.

border-collapse: collapse; Removes the space in between our borders. You could have also used the border-spacing property to make the space in between the cells bigger.
text-align: left; Aligns the text for the table headers and table data to the left.

th This SELECTOR targets the table headers.
text-align: center; Centers the text for the table headers. This CSS rule OVERRIDES the text-align: left property for the table headers. The table data will stay left aligned. We do this because we want our headers centered but still want to keep the padding of 5-pixels. As I said, this isn’t the best way to write CSS code, but it will teach you how to use some of the important table properties.

tr:nth-child(even) This selector targets every child element that is a table row with an even index. This is more advanced CSS, but I wanted to show you how to add a background color to every other cell in the table easily. You could replace “even” with “odd” to target every child that is a table row with an odd index. With this CSS rule, if you add 100 more rows, every other row would have a background color of blue. If you’re interested in learning more about this, click here: NTH-CHILD.
background-color: blue; Specifies a blue background color for every table row with an even index.

In the final example, we will add another table with a cell that spans two rows. We will also give this table a caption. See the images below.

index.html Example 4: ROWSPAN AND TABLE CAPTION

html tables rowspan and table caption

my-style.css Example 4: ROWSPAN AND TABLE CAPTION

html tables rowspan and table caption css

Displayed Page Example 4

html tables with rowspan and table caption attributes display

We begin example 4 by adding a second table to the index.html document right after the closing table tag of the first table. Right off the bat, you will notice that the table is arranged a little differently. This is because we want our table headers to display on the left side and the table data on the right. So, instead of this table running from top to bottom like the first table, it runs left to right. This table also has a caption. See more detailed information below.

<table style=”width: 100%;”> We specify a width of 100 percent of the screen just like the first table.
<caption>Employee Contact Information</caption> We add a table caption. This is centered above the table by default.
<th rowspan=”2″> Makes the “Contact” cell span over two rows. As you make larger tables you can create cells that span many rows or columns by specifying the amount in the rowspan attribute.

In the my-styles.css document, we have commented out the tr:nth-child(even) rule. The CSS COMMENT tags are highlighted in the image because they are different from HTML COMMENT tags. You should have already noticed that the new table is getting all of the styles that we specified for the first table with CSS code. This is one of the reasons that CSS is so powerful. If we were actually learning CSS, we would have specifically styled these two tables separately with what is called an ID. But that should be learned in the CSS TUTORIAL SERIES. The rule that we commented out will be ignored by the browser and the style will not be applied to the tables. To make it run, just remove the comment tags. The tr:nth-child(even) rule doesn’t fit with the design of the second table we just created. That’s why it was commented out.

caption Targets the caption element.
color: blue; Makes the font color blue for the caption.
margin-top: 40px; Gives a MARGIN of 40-pixels between the caption text and the next element above, which is the first table. We did this to create separation between the two tables.
margin-bottom: 5px; Gives a margin of 5-pixels between the caption text and the second table.
font-weight: bold; BOLDS the caption text.
Refer to the Displayed Page Example 4 image for the final product.

We have use quite a bit of CSS code in this lesson. Don’t worry about fully understanding it as this is a course on Html. CSS needed to be used to show some of the very simple ways of styling tables. Just look at the CSS part as a bonus to get your feet wet before you jump into learning the CSS language. You should now be able to create basic Html tables, adjust the column and row spans, and add some style. Try replacing the content inside of the <td></td> tags with other types of Html elements like, images and LINKS. The more you practice and experiment; the faster you’ll learn Html, and the better you’ll get at it. Thanks for reading, we’ll see you in the next lesson.

index.html Source Code


<!doctype html>
<html>
<head>
<title>HTML Tables</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>

<table style="width: 100%;">
<tr>
<th>Employee Name</th>
<th colspan="2">Job Title And Yearly Salary</th>
</tr>
<tr>
<td>John Doe</td>
<td>Front-end Developer</td>
<td>$92,750</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>Back-end Developer</td>
<td>$107,000</td>
</tr>
<tr>
<td>John Smith</td>
<td>Full Stack Developer</td>
<td>$114,000</td>
</tr>
</table>

<table style="width:100%">
<caption>Employee Contact Information</caption>
<tr>
<th>Name:</th>
<td>Jim Smith</td>
</tr>
<tr>
<th rowspan="2">Contact:</th>
<td>555-5555</td>
</tr>
<tr>
<td>jimsmith070485@email.com</td>
</tr>
</table>

</body>
</html>

my-style.css Source Code


table, th, td {
border: 1px solid blue;
font-family: arial;
border-collapse: collapse;
}

th, td {
padding: 5px;
text-align: left;
}

th {
text-align: center;
}

/* THIS RULE IS COMMENTED OUT AND WILL NOT RUN
tr:nth-child(even) {
background-color: blue;
}
*/

caption {
color: blue;
margin-top: 40px;
margin-bottom: 5px;
font-weight: bold;
}

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: