You are on page 1of 5

Some content is best displayed as a table. Tables consist of columns and rows.

Where
each column and row intersect, you have a cell. The minimum tags required for a table
are table, table row, and table data cells:
<table>
<tr>
<td></td>
</tr>
</table>

To add more columns across, just add more <td> tags on each row. Then add more
rows as needed after the first.
You can also add <thead>, <tbody>, and <tfoot> tags to group the cells. This makes it
easier to style certain portions of your table. <th> tags give your table a header. These
cells are automatically bold.
Creating a table is not difficult, but requires a lot of tags, which can make it tedious.
One thing that can make it easier is to create a row with all of its tags, but no data yet.
Then copy and paste that row over and over as many times as needed. Then go back
and add data to the cells. Creating the entire empty table first can make it easier in the
long run. This is also a great demonstration of how indenting is important. It makes it
much easier to find the rows and cells.

Styling
Tables can be styled like most other elements. You might use a combination of styles
within your HTML and styles in a separate CSS. If you just have one simple table,
HTML may be easier. But if you are doing several tables, CSS is probably the most
efficient. We will look at how to do many table styles in both formats.
Adding a border is one of the most basic styles you can add to a table. Tables do not
have borders by default, so if you want gridlines on yours, you will need to add them. In
HTML you can add the border property to your opening table tag:
<table border="5px">
Or in CSS you can add a table selector and use the border property:
table {
border: 5px; }
This setting adds lines around the table and inside it, but it only affects the width of the
outside lines. The default size is 1px. You can affect the inside lines by adding borders
to individual rows.
tr {
border: 5px;
}
Many of the border attributes we learned last week that apply to other elements, apply
to tables as well. You can apply width, style, and color to your table borders with CSS.
Note: your book shows you how add frames to tables, but this is not recognized in
HTML5. Stick with what you learned about borders last week and use CSS instead.
The default setting for borders has every cell with its own border, giving it a double-line
border, like this:
Changing it to border-collapse: collapse; gives it a single line.

Spans
Sometimes you want a cell to cover more than one row or column. For example, if you
create a calendar you may choose to use the entire top row for the name of the month.
To do this we use rowspan or colspan. For our calendar, we would want that top cell to
span across all 7 columns, so we would use
<td colspan="7">
If you prefilled your table with rows and cells, this will give you extra cells on that row, so
be sure to go back and delete the extras.
As we set up our table we designated the rows, but not the columns. If we want to
apply style to columns we have to add the colgroup element in our HTML. Inside those
tags are col tags, which are empty elements. After the opening table tag add
<colgroup>
<col class="col1" />
<col class="col2" />
.
</colgroup>
The browser automatically determines the columns from how your table is set up. The
classes are set up based on order of the columns. So if you only need to add style to
the last column, you will still have to set up classes for all the other columns so that the
last one comes in the correct order. But there is a shortcut. You can use a span in your
col tag.
<colgroup>
<col class="first5" span="5"/>
<col class="last1" />
</colgroup>
This would apply the same class to the first 5 columns and then you can add a different
class to the last column as needed.

Cell Space
You can add spacing inside your cells in CSS with the padding property you learned last
week. You can also adjust this in HTML with cellpadding="5px" inside your table tag.
cellspacing adjusts the spacing between cells. This is more noticeable if do not
collapse your borders. If you think back to the box model we discussed last week, you
may remember that margin is outside the border and padding is inside. cellspacing
works like margin. If you do not have a border, then you cannot tell a difference
between margins/cellspacing and padding/cellpadding, but you should use the correct
one in case you change your design to include borders.
You can set width and height by putting those properties in either HTML or CSS. You
can also set width and height for the entire table or individual rows or columns.
The contents of cells can be aligned with CSS. This was allowed in previous versions
of HTML, but was deprecated with HTML5. While you may see tables aligned in HTML,
you should learn to do it in CSS to stay with current specifications and ensure greater
cross-browser compatibility. Horizontal alignment is done with the property text-align.
It can have the values left, right, or center. You can also use vertical-align with the
values top, bottom, or middle.

Stripes
One thing that makes tables easier to read are stripes, where the colors alternate. You
can do this with the nth-child() selector. It would look like this:
tr:nth-child(even) {
background-color: lightgrey}
tr:nth-child(odd) {
background-color:white}
Although you may only need to specify either the odd or the even if you want to leave
one to the same as your page color.
Another thing you can do to enhance readability in your tables is to have rows change
color as the user hovers the mouse over them. This is done with a hover
tr:hover {
backround-color:lightgrey}
Tables are sometimes used for layouts. It used to be the best way to get sections of
your page in exactly the spot you wanted them, so you may see it in older pages (or
those done by older developers ). Now we have more options in HTML5, so you see
this used less. Tables are also more difficult to work with when designing for smaller
screens. But tables still have lots of great uses, so they are well worth learning.
References
CSS Styling Tables. (2017). W3schools.com. Retrieved 31 March 2017, from
https://www.w3schools.com/css/css_table.asp