HTML Tables

Welcome to the table section of my portfolio!

During my web development class, I learned how to create an HTML table! HTML tables allow web developers to arrange data into rows and columns. Below, I’ll give a very simple example of a table with data on the cats in my household.

Cat	Name	Type of Cat	Color	Favorite Food
	Mango	Tabby	Orange	Seafood Pâté
	Big	Tabby	Grey and White	Chicken Purée
	Fluff	Ragdoll	Grey and White	Tuna, plus the juice
	Daphne	Calico	Orange, White, and Black	Surfer's Delight Temptations

An HTML table consists of one ‘table’ element and one or more ‘tr’, ‘th’, and ‘td’ tags. The ‘tr’ tag defines a table row, the ‘th’ tag defines a table header (text that is placed at the top of the cell), and the ‘td’ tag defines a table cell (where data is placed). Organizing your data into a table like this allows users to get information quickly and easily. It provides efficient readability and reduces the complexity of searching for any information and represents the data in an easy format. As you can see, you are able to find out the name of my cats, what type they are, what color, and their favorite foods. I further made it easier for you to find information by alternating the background colors. In a larger table, this would help you keep your place while searching the data and it enhances your focus on the data you want to read. Here is an image of the code used for this table.



Pay attention to the tags I mentioned earlier and see if you can spot where the headers are, as well as the information I provided for each cat!

I hope you found this information from my web development portfolio insightful. If you have not fully checked out all my portfolio then use the links below or in the upper right corner of the page to navigate.