HTML/CSS: Tables

Tables

Another way to organize content in a web page is using a table. Tables use a variety of tags that are nested inside each other. Those tags include <table>, <tr>, <th>, and <td>.

The <table> element is the main tag that denotes a table. All other code for the table goes inside the <table> tag.

The main division in a table is a row. So, when designing a table, the first breakdown is into rows. 
<table>
	<tr><!-- row 1--></tr>
	<tr><!-- row 2--></tr>
	<tr><!-- row 3--></tr>
</table>

Once we have the table in rows, we can then add columns. Columns can be added with either the <th> or <td> tags. The <td> tag is for a standard table cell and stands for table delimeter. The <th> tag is for a table cell that is a header and automatically centers and bolds its content. 
<table>
	<tr>
		<th>col1</th><th>col2</th>
	</tr>
	<tr>
		<td>cell</td><td>cell</td>
	</tr>
	<tr>
		<td>cell</td><td>cell</td>
	</tr>
</table>
Note that each row has the same number of columns.

Styling Tables

When styling tables, we often utilize the width and height styles to set certain values for rows or columns. We also use the border style to make the borders appear. 
<head>
	<style>
		table, th, td{
			border:2px solid red;
			border-collapse:collapse;
		}
		table{
		    width:50%;
		}
		th{
		    width:25%;
		}
	</style>
</head>
<body>
<table>
	<tr>
		<th>Col 1</th><th>Col 2</th>
	</tr>
	<tr>
		<td>cell</td><td>cell</td>
	</tr>
	<tr>
		<td>cell</td><td>cell</td>
	</tr>
</table>
Col 1Col 2
cellcell
cellcell
Line 3 - styles are set and applied to the table tag, th and td tags.
Line 4 - The border of the table and cells are set.
Line 5 - It is sometimes necessary to set the border-collapse property to collapse in order to avoid having double borders (one around the table and one around each cell).
Line 8 - the table style is set to 50%. This means that the table will be 50% of its container element's width. If it is in the body, it will be 50% of the page. If is in a div that is half the page, the table will be half of that, or a quarter of the page.
Line 11 - the width of the first column header is set to 50px. That will set the first column to always be 50px and the other column(s) will take up the rest of the space.


Another style that is useful is the nth-child pseudo-class. A pseudo-class is a special class in CSS that has a provided name and does not need to be called in the HTML to be applied. The nth-child class allows a programmer to style child elements (elements inside other elements). In this case, we will use the even/odd parametersof the nth-child pseudo-class on the tr element to create a striped table. 
<head>
	<style>
		tr:nth-child(even){
			background-color:#cccccc;
		}
		table{
		    width:50%;
		}
		th{
		    width:25%;
		}
	</style>
</head>
<body>
    	<table>
    		<tr>
    			<th>Col 1</th><th>Col 2</th>
    		</tr>
    		<tr>
    			<td>cell</td><td>cell</td>
    		</tr>
    		<tr>
    			<td>cell</td><td>cell</td>
    		</tr>
    	</table>
Col 1Col 2
cellcell
cellcell
Line 3-5: Implements the nth-child style on the tr tag with the even parameter. Had the odd parameter been used, the first and third rows would have the gray background.

Merging Cells

Just like in a spreadsheet or word processing program, there is occasionally a need to merge cells in a table. In HTML tables, this is handled using the rowspan and colspan attributes that are applied to th and td tags.
  • rowspan merges cells vertically
  • colspan merges cells horizontally

    • <table>
	<tr>
		<th colspan='2'>header</th>
		<!--<th></th>-->
	</tr>
	<tr>
		<td>Cell 1</td>
		<td>Cell 2</td>
	</tr>
	<tr>
		<td>Cell 3</td>
		<td>Cell 4</td>
	</tr>
	<tr>
		<td rowspan='3'>Cell 5</td>
		<td>Cell 6</td>
	</tr>
	<tr>
		<!--<td>Cell 7</td>-->
		<td>Cell 8</td>
	</tr>
	<tr>
		<!--<td>Cell 9</td>-->
		<td>Cell 10</td>
	</tr>
</table>
    header
    Cell 1 Cell 2
    Cell 3 Cell 4
    Cell 5 Cell 6
    Cell 8
    Cell 10
    When a span (row or col) is used, it is important to note that the corresponding cell(s) being overtaken by the span should not be coded. In the example code, you will see that all cells were coded, but those affected by the spans were commented them out so they did not display (lines 4, 19 & 23).