“Tables” is really pronounced “tab-le’s”, like it’s french

As I go through these lessons again, tables are probably the thing I remember least. This is most likely due to the fact that I didn’t write a lot of them, and when it comes to code a lot of it is muscle memory. It’s like in organic chemistry where you redrew the reactions a million times so on the test you could write all the little details by reflex.

There are a few different tags that come into play when making tables on websites. The <table> element is used to define the entire table. The <tr> element is used to make table rows (which are the bars that go left and right), and each row is divided into data cells using the <td>, or table data, elements. Alternatively, you can use <th>, the table heading tag for making headings instead. There’s no tag for columns, rather, to add another one you would just add another <td> to a row.

<td> elements are the containers for the data in cells of the table, which can be anything, like text, links, images, lists, etc.

If you don’t specify a border for your table, it will appear without one, which can look kind of weird. You use the border attribute to set one, and while it can be added right in the opening tag of the <table> element, this is becoming an out of date practice, and it’s better to do that using CSS. For simplicities sake, an example using internal CSS is shown below:

<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
td
{
padding: 15px;
}
</style>

table1

The border-collapse property is used to make it so only one border appears, rather than two separate ones, which occur because each td and th element has a border around it. I’ve posted an example below of a table without the collapse property set.

table2

Now, when I tried this out, I was able to get it working by removing the th and td and only having table there, which I found odd. It makes me wonder why in the example they had me add the th and td tags to that style list.

<th> elements are used instead of <td>’s under the first <tr> listed in the table to make the headers. By default, browsers make these bold and centered, as seen in the examples above.

I also did some padding for the above examples, which puts some space between the content of the cells and their borders.

Another handy property is the text-align one, which can be used to align the text of the header or data cells left, right or in the center.

th
{
text-align:left;
}

 

table3

 

Border-spacing is another property that puts space in between the cells and their borders, putting the cells in weird little boxes. Maybe this would be good for styling pictures in a table? I’m not to sure, looks quite odd to me:

table4

 

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