HTML5 for Beginners – Simple Table with CSS

This is a third article in the series dedicated to beginners in HTML5 programming. In this example, we’ll create a file called simpleTablewithCSS.html, in which we’ll show a table that has 2 rows and 2 columns (each cell 200px x 200x), with styling done by utilizing CSS. The background colors top to bottom in this order: red, yellow, blue and teal.

 

Contents

WEEK 2 – DQ1 – Simple Table with CSS 1

1. Create an application project structure 1

2. HTML Code 1

3. CSS Code 2

4. Final HTML Document 3

 

Create an application project structure

To start the project, I’ve created following project structure.

  • Project Name
    • ‘CSS’ folder
      • ‘main.css’ – this is the file where the styling of the HTML document goes
    • ‘simpleTablewithCSS.html’ – this file holds the HTML code of the application

Following screenshot outlines the structure and how it looks inside the IDE:

HTML Code

HTML table always needs to contain the table tag; and at least one row and one cell element. So, inside the HTML body tag, I am using following HTML tags that define the final table:

  • <table> The <table> tag defines an HTML table.
  • <tr> The <tr> tag defines a row in an HTML table
  • <td> The <td> tag defines a standard cell in an HTML table

The goal was to create an HTML file; that contains a single table (<table>) of two rows (<tr>) and inside each row, two side by side cells (defined by <td>).This is a graphical representation of the table structure I’ve used in this project:

Following screenshot outlines an actual HTML code and its organization:

As you can see in the code sample, the top meta section of the HTML file contains a character set that uses UTF-8, then the title of the document, its description and a single link CSS reference to css/main.css file. Inside the body tag, I’ve included table, in the structure explained earlier.

CSS Code

To keep the CSS styling to a minimum and still achieve the goal, I’ve only injected CSS styles in four places.

This is done by using cell IDs (#leftTop, #rightTop, #leftBottom and #rightBottom). This allowed me to keep the CSS short and concise:

As the CSS code shows, table cell tag has the style defined in a single spot that covers all TD tags. TD CSS shows that all table cells should conform to 200px by 200px dimensions and align the text to the center of the cell.

Then the background color of each of the cells is injected through previously mentioned id tags.

Final HTML Document

To conclude, this is what the final HTML5 application looks like when rendered inside the browser:

(Visited 4 times in last 30 days)

Comments

comments