This tutorial teaches beginners how to create tables in HTML5, covering table structure, data organisation, and styling basics. It emphasises the importance of understanding table rows and columns, and introduces concepts for future enhancements using CSS and responsive design techniques.
Welcome to the tenth part of the Website Designer HTML5 and CSS beginners tutorial series. In this tutorial, we will learn how to build tables using HTML5. Tables are essential for organising data in a structured format, and understanding how to create them is a fundamental skill for web development.
To get started, open your web browser and Notepad++. Drag and drop your index file into Notepad++ to begin editing. Make sure your workspace is set up correctly so you can see the content clearly.
Adding a Title
Before we create our table, it’s a good practice to provide a title that describes the content of the table. Instead of using an <h2> tag, we will use an <h3> tag for this purpose. For example, if we are creating a table about staff members, we can write:
<h3>Staff Members</h3>
Starting the Table
To add more rows, you can either copy and paste the existing row or type new rows manually. For example, let’s add a few staff members:
<tr>
<td>John Doe</td>
<td>123-456-7890</td>
<td>john@example.com</td>
<td>London</td>
</tr>
<tr>
<td>Kelly Smith</td>
<td>098-765-4321</td>
<td>kelly@example.com</td>
<td>New York</td>
</tr>
Adding Borders
By default, tables do not have borders. To add borders around the cells, we can specify a border attribute in the <table> tag. For example:
<table border="1">
</table>
You can adjust the thickness of the border by changing the value. A value of “1” creates a thin line, while a higher number will create a thicker line.
Setting Width
To make the table fit better on the page, you can set its width. You can use a percentage or a pixel value. For example:
<table border="1" width="600">
</table>
This will set the table width to 600 pixels, making it easier to read.
After adding the necessary rows and data, ensure that your table is well-structured. You can continue to add more rows as needed. Remember to save your work frequently.
In future tutorials, we will explore how to enhance the appearance of our tables using CSS3. We will also look into responsive design techniques, which allow tables to adjust based on the screen size. This is particularly important for ensuring that your tables look good on both mobile and desktop devices.
In this tutorial, we covered the basics of creating tables in HTML5, including how to structure your data with rows and columns. Understanding these fundamentals is crucial as you progress in web development. Practice building different table layouts to become more comfortable with the syntax. In the next tutorial, we will delve deeper into styling tables and making them responsive. Thank you for following along, and I look forward to seeing you in the next DCP web tutorial!
