31 Deerpark Road
Ballymena, BT44 0DP
02895 811 999
info@ni2u.co.uk
support@ni2u.co.uk

Styling Tables with HTML & CSS

Styling Tables with HTML & CSS

Creating tables for a website can make building a website mundane at times. Styling a table with CSS is actually fairly simple and will undoubtedly add that extra an item you are trying to find within your site. In this tutorial, you will learn how to style an HTML table with CSS.

Getting Started

To be able to get started you will have to start up Visual Studio or notepad and have an html file along with a CSS file saved.

The Strategy…

The first thing we will be doing is providing a table. In your index or default html file, develop a table with at least 7 rows and two columns. We actually offer you with the code for any sample table in the coding box below:

 

See how we’ve got “th” for your heading and td for the actual cells. In CSS, you are able to specify which you want to style them separately or at the same time. This is accomplished by placing the name of the item to be styled and in brackets, inserting the styling. Say you need the table to have an image as the background, you will state table, along with brackets, spot that you expect a background picture using whatever url they have. In the programming below, we use a beer jpeg image as the background and the table to be displayed in block format with auto margins.

Next we’ll be handling the table content, therefore we can have the table cells, “td”, to produce white-coloured content with bold font.

At this point we’ll be attending to the actual table content, therefore we can have the table cells, “td”, to produce white-coloured text with bold font.

When you save, you can actually see the progress in split mode or style and design mode in Visual Studio. In the case you are with a simple written text editor such as notepad, simply go ahead and save, and open the file in the browser. From the program code we provided, your table need to appear as follows:
A small number of Last Words…
When you have successfully completed this tutorial, there are various elements we didn’t cover in this tutorial that only means that the possibilities to style your tables are endless. Join us next time for additional CSS tutorials!


Recommended Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.