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:
border:1px solid black;
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.
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.
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: