Snowpocalypse, table styling

It’s a breezy 27 degrees outside and snowing quite nicely, so it’s a perfect day for me to drink coffee and wine and learn how to style the table for my first semi-coherent crappy website.

After studying today I’ve learned that you need to use border-collapse to make sure that the lines in the table smush together into one line, and that the th element apparently doesn’t feel like following any of the font weight commands I give it.

I did learn how to use opacity with rgba for the background color of the table, which is great because I’m using a background picture and now the contrast between the two isn’t such an eye sore. Thanks to this handy hex to rgba code translator, I was able to find out what the rgba code was for the color I was using – http://hex2rgba.devoth.com/

It seems padding goes top, right, bottom, left, which at first made no sense to me, but then I realized it was going clockwise and felt a fair bit of shame.

I’m finding that commas are assholes, and having one at the wrong place, as in at the end of a list of elements, makes the css below not do anything.

So the example below didn’t work, but by removing the comma at the end of the td element it did. CSS you so sassy.

table, th, tr, td,
{
border: 1px solid black;
}

I’m happy with what I learned though, with the magic of css I was able to make the table below. Still need to figure out how to do spacing for the th elements though.

Screen Shot 2014-01-25 at 5.07.49 PM

Andddd here’s the css that made that happen (not including the background image shenanigans).

table, th, tr, td
{
border: 1px solid black;
}
table
{
border-collapse:collapse;
background-color:rgba(0, 118, 188, 0.8);
}
th
{
height:25px;
font-weight: bold;
}
td
{
text-align:left;
height:25px;
vertical-align:center;
padding:15px 20px 15px 20px;
}
caption
{
font-size: 40px;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s