6-page-content-elements edit

tables-wm edit

H5 Tables

H6 Default table style sample

An unstyled table option.

Sample two column table
Photo Left Table Cell Anchor text. Additional content.	Linked Photo Left Table Cell linked image Additional content.
H6 Table Cell Anchor text. Additional content. Additional content in its own p tag that will go on and on and on long enough to get a natural line wrap to show up so we can see the difference between two lines of text within a p tag, and two p tags. p.content_button > a p.content_button > a p.content_button > a	Top-aligned Table Cell Anchor text. Additional content. a.content_button a.content_button _with_arrow a.content_button a.read more link
Right-aligned Table Cell Anchor text. Additional content.	Center-aligned Table Cell Anchor text. Additional content. a.content_button a.content_button a.content_button

H6 Table with tablespecial format applied

Sample two column table with styling applied to add shading and padding to the cells.
Top-aligned Table Cell Anchor text. BR tag then additional content. Additional content in its own p tag that will go on and on and on long enough to get a natural line wrap to show up so we can see the difference between two lines of text within a p tag, and two p tags.	Table Cell Anchor text. Additional content. Test list item Test list item 2
Right-aligned Table Cell Anchor text. Additional content. Additional content in its own p tag that will go on and on and on long enough to get a natural line wrap to show up so we can see the difference between two lines of text within a p tag, and two p tags. Third p tag content.	Table Cell Anchor text. Additional content.

H5 test under table

Table with tablespecial format and header rows

Sample two column table with a header cell for a column group.
No tag - Sample Table Heading	H6 - Sample Table Heading	P tag - Sample Table Heading
Table Cell Contents	Anchor text. Additional content. Second p tag content. Third p tag content.	Anchor text. Additional content.
Table Cell Contents	Anchor text. Additional content.	Anchor text. Additional content.
Table Cell Contents	Anchor text. Additional content.	Anchor text. Additional content.
Sample Table Heading
Table Cell Contents	Anchor text. Additional content.	Anchor text. Additional content.

Wide table

Uses script to scroll side to side on narrow widths

Room #	Monitor Type	Control Panel Type	Document Camera	# of Projectors	Media Player	Air Media	Lecture Capture	Hearing Assist
101	WACOM	Touch Screen	Yes	1	BluRay	Yes	None	No
201	Dell Monitor	Touch Screen	No	1	BluRay	Yes	None	No
202	Dell Monitor	Touch Screen	No	1	BluRay	Yes	None	No

HTML
Output
SCSS

Expand

Copy

Edit

<h5>H5 Tables</h5> <h6>H6 Default table style sample</h6> <p>An unstyled table option.</p> <table> <caption>Sample two column table</caption> <tbody> <tr> <td> <h6>Photo Left Table Cell</h6> <p><img alt="Wren Building" src="https://www.wm.edu/_widgets/1619-2019/wren-building.jpg" /><a>Anchor text.</a><br />Additional content.</p> </td> <td> <h6>Linked Photo Left Table Cell</h6> <p><a>linked image<img alt="Wren Building" src="https://www.wm.edu/_widgets/1619-2019/wren-building.jpg" /></a><br />Additional content.</p> </td> </tr> <tr> <td> <h6>H6 Table Cell</h6> <p><a href="">Anchor text.</a><br>Additional content.</p> <p>Additional content in its own p tag that will go on and on and on long enough to get a natural line wrap to show up so we can see the difference between two lines of text within a p tag, and two p tags.</p> <p class="content_button"> <a href="">p.content_button > a</a> <a href="">p.content_button > a</a> <a href="">p.content_button > a</a> </p> </td> <td class="top-align-cell"> <h6>Top-aligned Table Cell</h6> <p><a href="">Anchor text.</a><br>Additional content.</p> <a class="content_button" href="../../as/index.php">a.content_button<span class="fa fa-angle-right" aria-hidden="true" style="top: 28%;"></span></a> <a class="content_button_with_arrow" href="../../as/index.php">a.content_button<br>_with_arrow<span class="fa fa-angle-right" aria-hidden="true" style="top: 28%;"></span></a> <a class="content_button" href="../../as/index.php">a.content_button<span class="fa fa-angle-right" aria-hidden="true" style="top: 28%;"></span></a> <a class="read-more-link" href="">a.read more link</a> </td> </tr> <tr> <td class="right-align-cell"> <h6>Right-aligned Table Cell</h6> <p><a href="">Anchor text.</a><br>Additional content.</p> <button class="button">button.button</button> <button class="content_button">button.<br>content_button</button> <button class="content_button_with_arrow">button.<br>content_button<br>_with_arrow <span class="fa fa-angle-right" aria-hidden="true"></span></button> </td> <td class="center-align-cell"> <h6>Center-aligned Table Cell</h6> <p><a href="">Anchor text.</a><br>Additional content.</p> <p> <a class="content_button" href="">a.content_button</a> <a class="content_button" href="">a.content_button</a> <a class="content_button" href="">a.content_button</a> </p> </td> </tr> </tbody> </table> <h6>H6 Table with <em>tablespecial</em> format applied</h6> <table class=" tablespecial"> <caption>Sample two column table with styling applied to add shading and padding to the cells.</caption> <tbody> <tr> <td class="top-align-cell"> <h6>Top-aligned Table Cell</h6> <p><a href="">Anchor text.</a><br>BR tag then additional content.</p> <p>Additional content in its own p tag that will go on and on and on long enough to get a natural line wrap to show up so we can see the difference between two lines of text within a p tag, and two p tags.</p> </td> <td> <h6>Table Cell</h6> <p><a href="">Anchor text.</a><br>Additional content.</p> <ul> <li>Test list item</li> <li>Test list item 2</li> </ul> </td> </tr> <tr> <td class="right-align-cell"> <h6>Right-aligned Table Cell</h6> <p><a href="">Anchor text.</a><br>Additional content.</p> <p>Additional content in its own p tag that will go on and on and on long enough to get a natural line wrap to show up so we can see the difference between two lines of text within a p tag, and two p tags.</p> <p>Third p tag content.</p> </td> <td> <h6>Table Cell</h6> <p><a href="">Anchor text.</a><br>Additional content.</p> </td> </tr> </tbody> </table> <h5>H5 test under table</h5> <h6><a id="headers"></a>Table with <em>tablespecial</em> format and header rows</h6> <table class=" tablespecial"> <caption>Sample two column table with a header cell for a column group.</caption> <tbody> <tr> <th scope="colgroup">No tag - Sample Table Heading</th> <th scope="colgroup"> <h6>H6 - Sample Table Heading</h6> </th> <th scope="colgroup"> <p>P tag - Sample Table Heading</p> </th> </tr> <tr> <td>Table Cell Contents</td> <td> <p><a href="">Anchor text.</a><br>Additional content.</p> <p>Second p tag content.</p> <p>Third p tag content.</p> </td> <td> <p><a href="">Anchor text.</a><br>Additional content.</p> </td> </tr> <tr> <td>Table Cell Contents</td> <td> <p><a href="">Anchor text.</a><br>Additional content.</p> </td> <td> <p><a href="">Anchor text.</a><br>Additional content.</p> </td> </tr> <tr> <td>Table Cell Contents</td> <td> <p><a href="">Anchor text.</a><br>Additional content.</p> </td> <td> <p><a href="">Anchor text.</a><br>Additional content.</p> </td> </tr> <tr> <th colspan="3" scope="colgroup">Sample Table Heading</th> </tr> <tr> <td>Table Cell Contents</td> <td> <p><a href="">Anchor text.</a><br>Additional content.</p> </td> <td> <p><a href="">Anchor text.</a><br>Additional content.</p> </td> </tr> </tbody> </table> <h5>Wide table</h5> <p>Uses script to scroll side to side on narrow widths</p> <table class=" tablespecial" height="285" summary="Andrews Equipment"> <tbody> <tr> <td><strong>Room #</strong></td> <td><strong>Monitor Type</strong></td> <td><strong>Control Panel Type</strong></td> <td><strong>Document Camera</strong></td> <td><strong># of Projectors</strong></td> <td><strong>Media Player</strong></td> <td><strong>Air Media</strong></td> <td><strong>Lecture Capture</strong></td> <td><strong>Hearing Assist</strong></td> </tr> <tr> <td>101</td> <td><a class="ideation-popup-link" href="/offices/it/services/academicsupport/classrooms/_lightboxes/wacom">WACOM</a></td> <td><a class="ideation-popup-link" href="/offices/it/services/academicsupport/classrooms/_lightboxes/touchscreen">Touch Screen</a></td> <td><a class="ideation-popup-link" href="/offices/it/services/academicsupport/classrooms/_lightboxes/documentcamera">Yes</a></td> <td><a class="ideation-popup-link" href="/offices/it/services/academicsupport/classrooms/_lightboxes/projector">1</a></td> <td><a class="ideation-popup-link" href="/offices/it/services/academicsupport/classrooms/_lightboxes/bluray">BluRay</a><a class="ideation-popup-link" href="/offices/it/services/academicsupport/classrooms/_lightboxes/vcrdvd"></a> </td> <td>Yes</td> <td>None</td> <td> <p>No</p> </td> </tr> <tr> <td>201</td> <td><a class="ideation-popup-link" href="/offices/it/services/academicsupport/classrooms/_lightboxes/dellmonitor">Dell Monitor</a></td> <td><a class="ideation-popup-link" href="/offices/it/services/academicsupport/classrooms/_lightboxes/touchscreen">Touch Screen</a></td> <td>No</td> <td><a class="ideation-popup-link" href="/offices/it/services/academicsupport/classrooms/_lightboxes/projector">1</a></td> <td><a class="ideation-popup-link" href="/offices/it/services/academicsupport/classrooms/_lightboxes/bluray">BluRay</a></td> <td>Yes</td> <td>None</td> <td> <p>No</p> </td> </tr> <tr> <td>202</td> <td><a class="ideation-popup-link" href="/offices/it/services/academicsupport/classrooms/_lightboxes/dellmonitor">Dell Monitor</a></td> <td><a class="ideation-popup-link" href="/offices/it/services/academicsupport/classrooms/_lightboxes/touchscreen">Touch Screen</a></td> <td>No</td> <td><a class="ideation-popup-link" href="/offices/it/services/academicsupport/classrooms/_lightboxes/projector">1</a></td> <td><a class="ideation-popup-link" href="/offices/it/services/academicsupport/classrooms/_lightboxes/bluray">BluRay</a></td> <td>Yes</td> <td>None</td> <td>No</td> </tr> </tbody> </table>