Generating Tables Using HTML and CSS

Ok, let's increase the table border to 2px and color black by adding the following code to the table tag: border: 2px solid #000000;.

The header cells by 1.5px and color black: style="border: 1.5px solid #000000;".

To increase the data cell borders by 1.5px color black, add the following code to the tr tag: style="border: 1.5px solid #000000;"

Your code should now look like this:

The Preview should now look this:

We're nearly there in creating the basic table, but there's one problem: the vertical border separating the data cells hasn't changed! No problem, we can rectify that with a bit of extra code in each data tag: style="border-right: 1.5px solid #000000;". Apart from adding some extra data cells, your code should now look like this:
<table style="width: 580px; border: 2px solid #000000;">

And this is how your table should look in Preview:

Finally, before adding data, let's increase the number of data rows. For this example we'll use four, you can use as many as you like. To increase the rows, just copy and paste the existing table row and data tags as many times as you require.

Your code should now look like this:

Your final table should now look like this:

There you have it, your completed table. But a table isn't much good without any content. In Part 2, we'll add some content, add some background color, and generally make the table more pleasing on the eye. Hope to see you there.

Like This 11

Join the Discussion

Write something…

My Favorites

Generating Tables Using HTML and CSS - Part 1

Tagged