# Tables

Basic table styling is provided within fusionCSS.

## Simple Table

The basic table styling.

Column 1 | Column 2 | Column 3 | Column 4
--- | --- | --- | ---
1.1 | 1.2 | 1.3 | 1.4
2.1 | 2.2 | 2.3 | 2.4
3.1 | 3.2 | 3.3 | 3.4

    <table>
    	<thead>
    		<tr>
    			<th>Column 1</th>
    			<th>Column 2</th>
    			<th>Column 3</th>
    			<th>Column 3</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>1.1</td>
    			<td>1.2</td>
    			<td>1.3</td>
    			<td>1.4</td>
    		</tr>
    		<tr>
    			<td>2.1</td>
    			<td>2.2</td>
    			<td>2.3</td>
    			<td>2.4</td>
    		</tr>
    		<tr>
    			<td>3.1</td>
    			<td>3.2</td>
    			<td>3.3</td>
    			<td>3.4</td>
    		</tr>
    	</tbody>
    </table>

## Bordered Table

Column 1 | Column 2 | Column 3 | Column 4
--- | --- | --- | ---
1.1 | 1.2 | 1.3 | 1.4
2.1 | 2.2 | 2.3 | 2.4
3.1 | 3.2 | 3.3 | 3.4

    <table class="bordered">
    	<thead>
    		<tr>
    			<th>Column 1</th>
    			<th>Column 2</th>
    			<th>Column 3</th>
    			<th>Column 3</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>1.1</td>
    			<td>1.2</td>
    			<td>1.3</td>
    			<td>1.4</td>
    		</tr>
    		<tr>
    			<td>2.1</td>
    			<td>2.2</td>
    			<td>2.3</td>
    			<td>2.4</td>
    		</tr>
    		<tr>
    			<td>3.1</td>
    			<td>3.2</td>
    			<td>3.3</td>
    			<td>3.4</td>
    		</tr>
    	</tbody>
    </table>

## Bordered Centered Table

Column 1 | Column 2 | Column 3 | Column 4
--- | --- | --- | ---
1.1 | 1.2 | 1.3 | 1.4
2.1 | 2.2 | 2.3 | 2.4
3.1 | 3.2 | 3.3 | 3.4

    <table class="bordered centered">
    	<thead>
    		<tr>
    			<th>Column 1</th>
    			<th>Column 2</th>
    			<th>Column 3</th>
    			<th>Column 3</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>1.1</td>
    			<td>1.2</td>
    			<td>1.3</td>
    			<td>1.4</td>
    		</tr>
    		<tr>
    			<td>2.1</td>
    			<td>2.2</td>
    			<td>2.3</td>
    			<td>2.4</td>
    		</tr>
    		<tr>
    			<td>3.1</td>
    			<td>3.2</td>
    			<td>3.3</td>
    			<td>3.4</td>
    		</tr>
    	</tbody>
    </table>

## Bordered and Striped Table

Column 1 | Column 2 | Column 3 | Column 4
--- | --- | --- | ---
1.1 | 1.2 | 1.3 | 1.4
2.1 | 2.2 | 2.3 | 2.4
3.1 | 3.2 | 3.3 | 3.4

    <table class="bordered striped">
    	<thead>
    		<tr>
    			<th>Column 1</th>
    			<th>Column 2</th>
    			<th>Column 3</th>
    			<th>Column 3</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>1.1</td>
    			<td>1.2</td>
    			<td>1.3</td>
    			<td>1.4</td>
    		</tr>
    		<tr>
    			<td>2.1</td>
    			<td>2.2</td>
    			<td>2.3</td>
    			<td>2.4</td>
    		</tr>
    		<tr>
    			<td>3.1</td>
    			<td>3.2</td>
    			<td>3.3</td>
    			<td>3.4</td>
    		</tr>
    	</tbody>
    </table>

## Bordered and Striped Table with Hover

Column 1 | Column 2 | Column 3 | Column 4
--- | --- | --- | ---
1.1 | 1.2 | 1.3 | 1.4
2.1 | 2.2 | 2.3 | 2.4
3.1 | 3.2 | 3.3 | 3.4

    <table class="bordered striped rowhover">
    	<thead>
    		<tr>
    			<th>Column 1</th>
    			<th>Column 2</th>
    			<th>Column 3</th>
    			<th>Column 3</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>1.1</td>
    			<td>1.2</td>
    			<td>1.3</td>
    			<td>1.4</td>
    		</tr>
    		<tr>
    			<td>2.1</td>
    			<td>2.2</td>
    			<td>2.3</td>
    			<td>2.4</td>
    		</tr>
    		<tr>
    			<td>3.1</td>
    			<td>3.2</td>
    			<td>3.3</td>
    			<td>3.4</td>
    		</tr>
    	</tbody>
    </table>

## Top Aligned Text Table

Column 1 | Column 2 | Column 3 | Column 4
--- | --- | --- | ---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | 1.2 | 1.3 | 1.4
2.1 | 2.2 | 2.3 | 2.4
3.1 | 3.2 | 3.3 | 3.4

    <table class="valigntop">
    	<thead>
    		<tr>
    			<th>Column 1</th>
    			<th>Column 2</th>
    			<th>Column 3</th>
    			<th>Column 3</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>1.1</td>
    			<td>1.2</td>
    			<td>1.3</td>
    			<td>1.4</td>
    		</tr>
    		<tr>
    			<td>2.1</td>
    			<td>2.2</td>
    			<td>2.3</td>
    			<td>2.4</td>
    		</tr>
    		<tr>
    			<td>3.1</td>
    			<td>3.2</td>
    			<td>3.3</td>
    			<td>3.4</td>
    		</tr>
    	</tbody>
    </table>

## Responsive Tables

Adding the class responsive to a table makes the table responsive, this functionality requires fusionCSS.js to be included.

Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | Column 6
--- | --- | --- | --- | --- | ---
1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 1.6
2.1 | 2.2 | 2.3 | 2.4 | 2.5 | 2.6
3.1 | 3.2 | 3.3 | 3.4 | 3.5 | 3.6

    <table class="bordered striped rowhover responsive">
    	<thead>
    		<tr>
    			<th>Column 1</th>
    			<th>Column 2</th>
    			<th>Column 3</th>
    			<th>Column 4</th>
    			<th>Column 5</th>
    			<th>Column 6</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>1.1</td>
    			<td>1.2</td>
    			<td>1.3</td>
    			<td>1.4</td>
    			<td>1.5</td>
    			<td>1.6</td>
    		</tr>
    		<tr>
    			<td>2.1</td>
    			<td>2.2</td>
    			<td>2.3</td>
    			<td>2.4</td>
    			<td>2.5</td>
    			<td>2.6</td>
    		</tr>
    		<tr>
    			<td>3.1</td>
    			<td>3.2</td>
    			<td>3.3</td>
    			<td>3.4</td>
    			<td>3.5</td>
    			<td>3.6</td>
    		</tr>
    	</tbody>
    </table>