How To Create a Table in HTML and CSS with Code Examples
Tags: html, css, tables
Published: 2024-04-17 22:38:52




When you intend to create a structured data set in tabular format, a table will do the trick. This article is just about that as we will dive into it by creating a beautifully designed table. This will serve both beginners and experts in HTML and CSS.  This article will also offer excellent teachings on creating a table using HTML to present tabular information and designing the same using CSS. 

There are so many text editors, but we will use VS Code and create a food timetable. 

Let's go!

####THE TABLE  DEFINITION in HTML

A Table in HTML can be defined as a tabular representation of data or information in rows and columns. Mastering the art of creating tables is key to the web development journey as they present both text and numerical data clearly and effectively. We will explore different options to unlock the potential of HTML tables. 



#####DEFINITION and USES of TABLE TAGS

To create a table in HTML, it is important to understand the table tags. The `<table>` tag is the most important as it acts as a container for the entire table. A table is made up of 3 segments which include;

- Table header `<thead>`: Refers to the cells and data written in at the top of the table. 
- Table body `<tbody>`: Refers to the main content of data in the table
- Table footer `<tfoot>`: Refers to the cells and data written at the bottom of the table

#####Other Common HTML Table Tags:

- `<tr>`: Used to represent table rows
- `<th>`: Used to represent table headings
- `<td>`: Used to represent table data cells


#####AN OVERVIEW of the FINAL PROJECT TABLE OUTPUT

#####PREVIEW of the FINAL TABLE OUTPUT 



![This is the final look of the table we will create.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lh3jkiqros5kup3n3x0i.jpg)

#####PREVIEW of the DIFFERENT  STYLES APPLIED on the FINAL TABLE OUTPUT




![This is the final outlook of the table with some CSS designs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ttaemzkivmcaqoa4ngn.PNG)


##### DISCUSSING the HTML TABLE SYNTAX

In HTML and CSS, syntax can be defined as the order in which elements are written. Every programming language must observe the syntax rules. The elements that make up a table are the tags that create the structure of a table. 

#####CREATING the FOOD TIME TABLE FROM SCRATCH

This is where the real work begins, it is important to come up with a title and a heading for your table, the below code will do the trick.

#####CREATING the TITLE of the PAGE, TABLE HEADING and TABLE TAG

- `<title>` tag creates the title: FOOD TIME TABLE
-  `<h2>` tag creates the heading: AROMA LA CAFE’ FOOD TIMETABLE
- `<table>` tag is the container of the entire table.


```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FOOD TIME TABLE</title>
</head>
<h2>AROMA LA CAFE' FOOD TIMETABLE</h2>
<body>
    <table>
        
        

    </table>
    
</body>
</html>

```

Below is the output of the above HTML code. It is important to note that the table is already created by the `<table>` tag but we may need help to view it as we are yet to define the rows and columns.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cs4jrxb5fng4z6q5j7bx.PNG)

#####PRACTICAL USE of TABLE TAGS

Table head <thead> contains the Table row `<tr>`, the table heading is defined by the `<th>`tag, 

`<tbody>` contains the  `<tr>` and Table data `<td>`. It is important to observe the order and arrangement of these tags as they are the key to displaying structural content. 


```
<h2>AROMA LA CAFE' FOOD TIMETABLE</h2>
<body>
    <table>
        <thead>
            <tr>
                <th>DAY</th>
                <th>BREAKFAST</th>
                <th>LUNCH</th>
                <th>SUPPER</th>
                <th>SNACK</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>MONDAY</td>
                <td>Bone Soup</td>
                <td>Ugali & Beef</td>
                <td>Rice & Beans</td>
                <td>Orange</td>
            </tr>
            <tr>
                <td>TUESDAY</td>
                <td>Cappucino & Samosa</td>
                <td>Vegetable Rice</td>
                <td>Sweet Potatoes</td>
                <td>Apple</td>
            </tr>

```
With the above code, we can see the below output. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/heuk3wl5wm1esykzj852.PNG)

Finally, our last HTML syntax is shown below.


```
<tr>
                <td>WEDNESDAY</td>
                <td>Green Tea Samosa</td>
                <td>Fries</td>
                <td>Brown Bread Smashed Potatoes</td>
                <td>Fresh Juice</td>
            </tr>
            <tr>
                <td>THURSDAY</td>
                <td>Mahamri Mbaazi</td>
                <td>Rice Beef</td>
                <td>Fries and Chicken</td>
                <td>Avocado</td>
            </tr>
            <tr>
                <td>FRIDAY</td>
                <td>Boiled Maize</td>
                <td>Pilau</td>
                <td>Ugali Vegetable</td>
                <td>Watermelon</td>
            </tr>
            <tr>
                <td>SATURDAY</td>
                <td>Porridge</td>
                <td>Biriani</td>
                <td>Steamed Cabbage</td>
                <td>Mango</td>
            </tr>
            <tr>
                <td>SUNDAY</td>
                <td>Peanuts</td>
                <td>Chicken Breast Ugali</td>
                <td>Fish Stew</td>
                <td>Pinneaple</td>
            </tr>
        </tbody>

```
    

    

    </table>




And finally, our table is fully created with no borders and zero styling. CSS will play a major role in beautifying our table. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dg35fi782ofowu3dxwlk.PNG)





#####INTRODUCING CSS to STYLE UP our TABLE

#####What is CSS
CSS is a language that helps developers style their web pages by adding designs to elements like colors, font type, borders, padding, etc.

#####DISCUSSING DIFFERENT  TYPES  of STYLES in CSS
There are 3 main types of CSS that we will incorporate as we progress

- Inline Styling: It's done when we apply a style directly to a particular HTML element 
- Embedded Styling: It's done when we include our style in the HTML document
- External Styling: Is the most commonly used style where we write our style in a separate file and link it with the HTML file. We will utilize this style to design our table.
 

#####APPLICATION and IMPLEMENTATION of DIFFERENT DESIGNS and STYLES on TABLES

We will go ahead and create a file name by the name ‘style.css’  and link it with the HTML file as per below:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwirae5vz5198ldmxgd5.PNG)

#####DISCUSSING the ASTERIC *, MARGIN, BORDER, PADDING, and OTHER CSS STYLES

In CSS, the * (asterisk) is known as the Universal selector and is used to select all items in the HTML file while the curly braces mark the beginning of the CSS code as displayed below. 

In our code below, we introduce the “Margin property” which defines the space and gaps between an element with other elements

The “Padding property” defines the space and gaps between an element and the border of the element.

It is possible to style up elements by declaring them followed by the curly braces, which hold the property  name and property value {: ;} 

For instance, in our case, the body is the element, background-color is the property name while deeppink is the property value. This is how to style up the body with the different CSS styles as seen below.

To style up the table, the code below will also do the trick and display the below output. 

You can learn more about nth-child here.[www.freecodecamp.org](https://www.freecodecamp.org/news/nth-child-vs-nth-of-type-selector-in-css/)


```
*{margin: auto; padding: 20px; font-family: Helvetica;}

body{display: grid; place-items:center;}

table {padding: 5px; border-collapse: collapse;}
```


#####PREVIEW of the OUTPUT of the ABOVE CODE


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hgsgx35wlgcj9jue19nk.PNG)

#####MORE CSS STYLES and FINAL OUTPUT


```
th {background-color:rgb(22, 22, 114); color: gold; text-align: center;}

table, td, tr {box-shadow: -6px 12px 12px -6px rgb(95,8, 55);
padding: 20px; text-align: center;}

h2, td, h4{color: black;}
```



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fnrsv6gejo1jc1urwfb.PNG)

#####MORE CSS STYLES and FINAL OUTPUT

Let’s go ahead and change the the color to “blue” and remove the background color to the default color 
White:



#####OUTPUT

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7gamc2wc5ssxx6fwp09.PNG)

#####CSS HOVER, TRANSFORM, TRANSITION, and Some ANIMATIONS and HOW to APPLY THEM on TABLES

It is possible to change the colors of the items in the table rows using the nth-child property. In this context, The table is regarded as the parent while the rows are the children. Since the arrangement of the rows can be in odd or even numbers, we must declare the same as per below: 

CSS hover is a property used to select items when you mouse over them, the effect is a great way to express visual interactivity.  


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7agb06wvcgxd3e7883w8.PNG)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vbdahclv1to32wfb974.png)

#####Preview of the hover property;


```
tr:nth-child(even){background-color: #51517f;}

tr:nth-child(even):hover{background-color: #412f84 ;
    transform: scale(1.5); transition: transform 2000ms ease}

tr:nth-child(odd):hover{background-color: #1c536c; 
    transform: scale(1.5); transition: transform 2000ms ease;}
```


#####IMPORTANCE of TABLES in WEB DEVELOPMENT

- Tables are a great way to represent data systematically to users
- Tables offer easy-to-read and organised tabular data
- Tables can be used to create a database

#####CONCLUSION

It is safe to say that learning to create a simple table is very important to any web developer as It represents complex data organized in rows and columns as well as gives a great foundation for web development. 

Tabular data is easy to understand at a glance. Developers must understand clearly that tables are essential tools in all aspects of web development. It is also important to understand the basic concepts of CSS for designing and styling the table or the website as a whole.