<pre class="prettyprint">Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting.
+Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.
<div> <h1>Heading</h1> <p>Something right here...</p> +</div>+
<div> + <h1>Heading</h1> + <p>Something right here...</p> </div>
Download google-code-prettify and view the readme for how to use.
- <table>
- <thead>
- <tbody>
- <tr>
- <th>
- <td>
- <colspan>
- <caption>
-
Tables are great—for a lot of things. Great tables, however, need a bit of markup love to be useful, scalable, and readable (at the code level). Here are a few tips to help.
-Always wrap your column headers in a <thead> such that hierarchy is <thead> > <tr> > <th>.
Similar to the column headers, all your table’s body content should be wrapped in a <tbody> so your hierarchy is <tbody> > <tr> > <td>.
All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.
-| # | -First Name | -Last Name | -Language | +Tag | +Description |
|---|---|---|---|---|---|
| 1 | -Some | -One | -English | +
+ <table>
+ |
+ + Wrapping element for displaying data in a tabular format + |
| 2 | -Joe | -Sixpack | -English | +
+ <thead>
+ |
+
+ Container element for table header rows (<tr>) to label table columns
+ |
| 3 | -Stu | -Dent | -Code | +
+ <tbody>
+ |
+
+ Container element for table rows (<tr>) in the body of the table
+ |
+
+ <tr>
+ |
+
+ Container element for a set of table cells (<td> or <th>) that appears on a single row
+ |
+ ||||
+ <td>
+ |
+ + Default table cell + | +||||
+ <th>
+ |
+
+ Special table cell for column (or row, depending on scope and placement) labels + Must be used within a <thead>
+ |
+ ||||
+ <caption>
+ |
+ + Description or summary of what the table holds, especially useful for screen readers + |
+<table> + <thead> + <tr> + <th>...</th> + <th>...</th> + </tr> + </thead> + <tbody> + <tr> + <td>...</td> + <td>...</td> + </tr> + </tbody> +</table> ++
All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.
+| # | +First Name | +Last Name | +Language | +
|---|---|---|---|
| 1 | +Some | +One | +English | +
| 2 | +Joe | +Sixpack | +English | +
| 3 | +Stu | +Dent | +Code | +
<table> ... </table>-
Get a little fancy with your tables by adding zebra-striping—just add the .zebra-striped class.
| # | -First Name | -Last Name | -Language | -
|---|---|---|---|
| 1 | -Some | -One | -English | -
| 2 | -Joe | -Sixpack | -English | -
| 3 | -Stu | -Dent | -Code | -
Note: Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.
+Get a little fancy with your tables by adding zebra-striping—just add the .zebra-striped class.
| # | +First Name | +Last Name | +Language | +
|---|---|---|---|
| 1 | +Some | +One | +English | +
| 2 | +Joe | +Sixpack | +English | +
| 3 | +Stu | +Dent | +Code | +
Note: Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.
<table class="zebra-striped"> ... </table>-
Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.
-| # | -First Name | -Last Name | -Language | -
|---|---|---|---|
| 1 | -Your | -One | -English | -
| 2 | -Joe | -Sixpack | -English | -
| 3 | -Stu | -Dent | -Code | -
Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.
+| # | +First Name | +Last Name | +Language | +
|---|---|---|---|
| 1 | +Your | +One | +English | +
| 2 | +Joe | +Sixpack | +English | +
| 3 | +Stu | +Dent | +Code | +
<script src="js/jquery/jquery.tablesorter.min.js"></script> <script > @@ -846,8 +924,7 @@ <table class="zebra-striped"> ... </table>- - +