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
PREVIEW of the DIFFERENT STYLES APPLIED on the FINAL TABLE OUTPUT
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.
PRACTICAL USE of TABLE TAGS
Table head contains the Table row With the above code, we can see the below output. Finally, our last HTML syntax is shown below. And finally, our table is fully created with no borders and zero styling. CSS will play a major role in beautifying our table. CSS is a language that helps developers style their web pages by adding designs to elements like colors, font type, borders, padding, etc. There are 3 main types of CSS that we will incorporate as we progress We will go ahead and create a file name by the name ‘style.css’ and link it with the HTML file as per below: 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 Let’s go ahead and change the the color to “blue” and remove the background color to the default color 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. 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.<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>
<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>
INTRODUCING CSS to STYLE UP our TABLE
What is CSS
DISCUSSING DIFFERENT TYPES of STYLES in CSS
APPLICATION and IMPLEMENTATION of DIFFERENT DESIGNS and STYLES on TABLES
DISCUSSING the ASTERIC *, MARGIN, BORDER, PADDING, and OTHER CSS STYLES
*{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
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;}
MORE CSS STYLES and FINAL OUTPUT
White:
OUTPUT
CSS HOVER, TRANSFORM, TRANSITION, and Some ANIMATIONS and HOW to APPLY THEM on TABLES
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
CONCLUSION
Top comments (0)