In this article, we are going to create an HTML table on a web page and style it using a little bit of CSS. Here is a preview of how the complete table is going to look like at the end of this article.
UEFA Champions League – Most Titles
In the following CodeBerry programming video, you can see the whole process of how you can create nice tables for your website.
And if you’d like to try it out by yourself, you’ll find the codes below in an editable version, so you can check out how tables work in HTML and CSS.
Create the HTML boilerplate
An HTML webpage skeleton contains the basic HTML elements that define the structure of any web page.
At the top of this code is the DOCTYPE tag that tells the browser that we intend to build an HTML document. This tag is then followed by the <html> tag which is the main wrapper for all content on the web page. The head section houses other tags that are key in determining how the web page is displayed and this include:
The <title> tag defines the name of the web page that appears in the browser tab while the
<link> states the path that links an external stylesheet (style.css) to the main web page. It contains CSS files necessary for the styling of the webpage.
Creating an HTML Table
Description of useful HTML tags
The head section is one of the most critical sections of the webpage and it contains most of the contents that are displayed on the webpage. This is the section where we write the code that creates the actual table.
There are three important tags when constructing a table in HTML: the <table> tag is used to define an HTML table and it indicates the start of the table, the <tr> tag stands for table row and is used to create a row in any table. On the other hand, the <td> tag stands for table data and is useful in populating the cells of any table with data we wish to be displayed inside the table.
Creating the actual table
The process of creating an HTML table is simple and straightforward. Inside the opening and closing body tags create the table tags <table> </table>. Every table needs to have a header that best describes the table, in order to achieve this, create the first row within the tables tags using the row tags <tr></tr>. Using the table data tags <td></td> populate this first row with the title that we wish the table to go by in this case the title is “UEFA Champions League – Most Titles”.
At this point, the table only contains one row in order to add another row tag adjacent to the first-row tag. To populate the corresponding columns of this row use four <td> tags together with the data to be displayed in between the opening and closing tags.
The table that we intend to build contains five rows and four columns. This means that we need to add four more “<tr></tr>” tags each with four “<td></td>” tags as shown in the code below.
After typing the following code into any editor of your choice save the file with an .html extension i.e table.html
Navigate to the location where the file has been saved and double click the file to open it, the file opens in the system default browser and the output is shown below.
In order to span the title across all the columns, we have added the colspan=”4” into the first <tr> tag.
Styling the HTML table
The final section involves adding some styling to the table in order to make the page look better.
Cascading Style Sheets abbreviated as CSS provides the necessary tools to style any web page. In the head section, we defined a link that connects our web page to the file that contains files necessary for styling our page.
In order to style our web page create an external file named ‘style.css’ in the same folder as the HTML file and add the following code to the file.
Now run open the HTML file in order to obtain the following output on the browser.
In our Programming Tutorials series, you’ll find useful materials which will help you improve your programming skills and speed up the learning process.
- How to create perfect HTML tables?
- HTML color codes
- CSS background images
- Best Programming Books You Must Read in 2021
- Python for loop
- Creating a table using HTML and CSS
Would you like to learn how to code, online? Come and try our first 25 lessons for free at the CodeBerry Programming School.