Clae's Guide to: Simple CSS tables

Simple CSS Table

There are two standard coding languages for posting tables, HTML and CSS. Imagine that you are painting a room. CSS IS THE PAINT and once you have it, you can paint any part of the room with it. HTML IS THE ROOM and serves as a great foundation for the paint.

To keep with our analogy, we need to build our PAINT CAN which will hold all of the beautiful style elements. The paint can (CSS block) is best contained in one chunk at the top or bottom and lives outside of where you're actually writing your post.

So the structure or your table will be:

CSS CODE ["Paint Can"]

HTML CODE that calls CSS elements ["Painted Room"]

Your post ["Idk air in the room or something"]

Final HTML CODE that closes your code ["The Door to the Room"]

Read the next post to get started!

CSS Code

You are HERE:

CSS CODE ["Paint Can"]

This is the hardest part. Here is where you plan the structure of your post and basically everything about it (how big, how wide, what font style, etc.)

Basics

Your CSS code will always be in a chunk defined by

<style></style>

tags. This tells Sonder that you're defining CSS.

Every color in your paint can will have a special class or ID (also a "div id" or "div class"). For the sake of this lesson, we will only use classes but they function the same way and you can read more here if you really want to be a try-hard.

Each class is defined in this way: It's initiated with a period (".") followed by its name, and then a set of curly brackets which defines it. You can put in any style elements you want (background, height, width, font style, color, line height, etc.). For all the options, READ THIS

.timothy { }

It can then be defined in HTML ("painted on the house") like this:

<div class="timothy"> </div>

And now everything in the div tags will be styled how you specified above, just like how every wall you paint with blue paint will be... well... BLUE!

Practice

Let's build a simple CSS posting table! I usually only have two main elements which you can think of as "paint for the trim" and "paint for the wall".

Let's start with the trim (or the background/sizes). Here, you will need the following style elements: background, height, and width. You'll also have to decide if you want your table to extend or scroll.

WIP BECAUSE TUTORIALS ARE EXHAUSTING