Unity Pattern Lab

Unstyled Table

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

This pattern contains: atoms-table

HTML

									
										    <table class="">
    	<thead>
    		<tr>
    			<th>Table Heading 1</th>
    			<th>Table Heading 2</th>
    			<th>Table Heading 3</th>
    			<th>Table Heading 4</th>
    			<th>Table Heading 5</th>
    		</tr>
    	</thead>
    	<tfoot>
    		<tr>
    			<th>Table Footer 1</th>
    			<th>Table Footer 2</th>
    			<th>Table Footer 3</th>
    			<th>Table Footer 4</th>
    			<th>Table Footer 5</th>
    		</tr>
    	</tfoot>
    	<tbody>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	</tbody>
    </table>

Full Table

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

This pattern contains: atoms-table

HTML

									
										    <table class="table">
    	<thead>
    		<tr>
    			<th>Table Heading 1</th>
    			<th>Table Heading 2</th>
    			<th>Table Heading 3</th>
    			<th>Table Heading 4</th>
    			<th>Table Heading 5</th>
    		</tr>
    	</thead>
    	<tfoot>
    		<tr>
    			<th>Table Footer 1</th>
    			<th>Table Footer 2</th>
    			<th>Table Footer 3</th>
    			<th>Table Footer 4</th>
    			<th>Table Footer 5</th>
    		</tr>
    	</tfoot>
    	<tbody>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	</tbody>
    </table>

Striped Table

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

This pattern contains: atoms-table

HTML

									
										    <table class="table table-striped">
    	<thead>
    		<tr>
    			<th>Table Heading 1</th>
    			<th>Table Heading 2</th>
    			<th>Table Heading 3</th>
    			<th>Table Heading 4</th>
    			<th>Table Heading 5</th>
    		</tr>
    	</thead>
    	<tfoot>
    		<tr>
    			<th>Table Footer 1</th>
    			<th>Table Footer 2</th>
    			<th>Table Footer 3</th>
    			<th>Table Footer 4</th>
    			<th>Table Footer 5</th>
    		</tr>
    	</tfoot>
    	<tbody>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	</tbody>
    </table>

Light Grey Table

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

This pattern contains: atoms-table

HTML

									
										
<table class="light-grey-table">
	<thead>
		<tr>
			<th>Table Heading 1</th>
			<th>Table Heading 2</th>
			<th>Table Heading 3</th>
			<th>Table Heading 4</th>
			<th>Table Heading 5</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Table Footer 1</th>
			<th>Table Footer 2</th>
			<th>Table Footer 3</th>
			<th>Table Footer 4</th>
			<th>Table Footer 5</th>
		</tr>
	</tfoot>
	<tbody>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	</tbody>
</table>

<table class="light-grey-table table">
	<thead>
		<tr>
			<th>Table Heading 1</th>
			<th>Table Heading 2</th>
			<th>Table Heading 3</th>
			<th>Table Heading 4</th>
			<th>Table Heading 5</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Table Footer 1</th>
			<th>Table Footer 2</th>
			<th>Table Footer 3</th>
			<th>Table Footer 4</th>
			<th>Table Footer 5</th>
		</tr>
	</tfoot>
	<tbody>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	</tbody>
</table>

Responsive Striped Table

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

This pattern contains: atoms-table

HTML

									
										<div class="table-responsive">
    <table class="table table-striped">
    	<thead>
    		<tr>
    			<th>Table Heading 1</th>
    			<th>Table Heading 2</th>
    			<th>Table Heading 3</th>
    			<th>Table Heading 4</th>
    			<th>Table Heading 5</th>
    		</tr>
    	</thead>
    	<tfoot>
    		<tr>
    			<th>Table Footer 1</th>
    			<th>Table Footer 2</th>
    			<th>Table Footer 3</th>
    			<th>Table Footer 4</th>
    			<th>Table Footer 5</th>
    		</tr>
    	</tfoot>
    	<tbody>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	</tbody>
    </table>
</div>

Tablesaw

Table Saw Demos

Shrink the browser window to see the table reflow.

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

	New York State Resident	Out of State
Undergraduate	$257/credit	$816/credit
Graduate**	$432/credit	$841/credit
Graduate MBA students	$551/credit	$924/credit

This pattern contains: atoms-table

HTML

									
										<h2>Table Saw Demos</h2>
            <p>Shrink the browser window to see the table reflow.</p>


<table class="tablesaw tablesaw-stack light-grey-table table">
	<thead>
		<tr>
			<th>Table Heading 1</th>
			<th>Table Heading 2</th>
			<th>Table Heading 3</th>
			<th>Table Heading 4</th>
			<th>Table Heading 5</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Table Footer 1</th>
			<th>Table Footer 2</th>
			<th>Table Footer 3</th>
			<th>Table Footer 4</th>
			<th>Table Footer 5</th>
		</tr>
	</tfoot>
	<tbody>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	</tbody>
</table>

            <table class="tablesaw tablesaw-stack light-grey-table width-100-percent" data-tablesaw-mode="stack" border="0" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th></th>
                        <th>New York State Resident</th>
                        <th>Out of State</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Undergraduate</td>
                        <td>$257/credit</td>
                        <td>$816/credit</td>
                    </tr>
                    <tr>
                        <td>Graduate**</td>
                        <td>$432/credit</td>
                        <td>$841/credit</td>
                    </tr>
                    <tr>
                        <td>Graduate MBA students</td>
                        <td>$551/credit</td>
                        <td>$924/credit</td>
                    </tr>
                </tbody>
            </table>

Simple Two Col

Summary	The Common Application allows you to apply to more than 500 participating schools with one application.
Requirements	Required member questions Essay of at least 250 words Online Teacher/Counselor Evaluation
Application Fee	$50
Notes	Use The Common Application if you are applying to honors programs at Stony Brook. (Applicants to honors programs must follow additional procedures as well.)

HTML

									
										
                            <table class="simple-two-col-table">
                                <tbody><tr>
                                    <td class="cell-label">Summary</td>
                                    <td><a class="external-link" href="http://www.commonapp.org/" target="_blank">The Common Application</a> allows you to apply to more than 500 participating schools with one application.</td>
                                </tr>
                                <tr>
                                    <td class="cell-label">Requirements</td>
                                    <td>
                                        <ul class="default-bullets">
                                            <li>Required member questions</li>
                                            <li>Essay of at least 250 words</li>
                                            <li>Online Teacher/Counselor Evaluation</li>
                                        </ul>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="cell-label nowrap">Application Fee</td>
                                    <td>$50</td>
                                </tr>
                                <tr>
                                    <td class="cell-label">Notes</td>
                                    <td>Use <a class="external-link" href="http://www.commonapp.org/" target="_blank">The Common Application</a> if you are applying to <a href="http://www.stonybrook.edu/ugadmissions/newhonors/index.shtml" target="_blank">honors programs</a> at Stony Brook. (Applicants to honors programs must follow <a href="http://www.stonybrook.edu/ugadmissions/newhonors/apply.shtml" target="_blank">additional procedures</a> as well.)</td>
                                </tr>
                            </tbody></table>