<tr>
<td><code><pre class="prettyprint"></code></td>
<td>
- <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting.</p>
+ <p>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.</p>
<pre class="prettyprint"><div>
<h1>Heading</h1>
<p>Something right here...</p>
+</div></pre>
+<pre class="prettyprint linenums"><div>
+ <h1>Heading</h1>
+ <p>Something right here...</p>
</div></pre>
<p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
</td>
<div class="page-header">
<h1>Tables <small>For, you guessed it, tabular data</small></h1>
</div>
- <!-- Table structure -->
+
+ <h2>Table markup</h2>
<div class="row">
- <div class="span3">
- <h2>Building tables</h2>
- <p>
- <code><table></code>
- <code><thead></code>
- <code><tbody></code>
- <code><tr></code>
- <code><th></code>
- <code><td></code>
- <code><colspan></code>
- <code><caption></code>
- </p>
- <p>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.</p>
- <p>Always wrap your column headers in a <code><thead></code> such that hierarchy is <code><thead></code> > <code><tr></code> > <code><th></code>.</p>
- <p>Similar to the column headers, all your table’s body content should be wrapped in a <code><tbody></code> so your hierarchy is <code><tbody></code> > <code><tr></code> > <code><td></code>.</p>
- </div>
- <div class="span9">
- <h3>Example: Default table styles</h3>
- <p>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.</p>
- <table>
+ <div class="span8">
+ <table class="zebra-striped">
<thead>
<tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Language</th>
+ <th>Tag</th>
+ <th>Description</th>
</tr>
</thead>
<tbody>
<tr>
- <td>1</td>
- <td>Some</td>
- <td>One</td>
- <td>English</td>
+ <td>
+ <code><table></code>
+ </td>
+ <td>
+ Wrapping element for displaying data in a tabular format
+ </td>
</tr>
<tr>
- <td>2</td>
- <td>Joe</td>
- <td>Sixpack</td>
- <td>English</td>
+ <td>
+ <code><thead></code>
+ </td>
+ <td>
+ Container element for table header rows (<code><tr></code>) to label table columns
+ </td>
</tr>
<tr>
- <td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>Code</td>
+ <td>
+ <code><tbody></code>
+ </td>
+ <td>
+ Container element for table rows (<code><tr></code>) in the body of the table
+ </td>
</tr>
- </tbody>
- </table>
-<pre class="prettyprint linenums">
-<table>
- ...
-</table></pre>
- <h3>Example: Zebra-striped</h3>
- <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p>
- <table class="zebra-striped">
- <thead>
<tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Language</th>
+ <td>
+ <code><tr></code>
+ </td>
+ <td>
+ Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row
+ </td>
</tr>
- </thead>
- <tbody>
<tr>
- <td>1</td>
- <td>Some</td>
- <td>One</td>
- <td>English</td>
+ <td>
+ <code><td></code>
+ </td>
+ <td>
+ Default table cell
+ </td>
</tr>
<tr>
- <td>2</td>
- <td>Joe</td>
- <td>Sixpack</td>
- <td>English</td>
+ <td>
+ <code><th></code>
+ </td>
+ <td>
+ Special table cell for column (or row, depending on scope and placement) labels<br>
+ Must be used within a <code><thead></code>
+ </td>
</tr>
<tr>
- <td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>Code</td>
+ <td>
+ <code><caption></code>
+ </td>
+ <td>
+ Description or summary of what the table holds, especially useful for screen readers
+ </td>
</tr>
</tbody>
</table>
- <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
+ </div>
+ <div class="span4">
+<pre class="prettyprint linenums">
+<table>
+ <thead>
+ <tr>
+ <th>...</th>
+ <th>...</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>...</td>
+ <td>...</td>
+ </tr>
+ </tbody>
+</table>
+</pre>
+ </div>
+ </div>
+
+ <h2>Example tables</h2>
+ <h3>1. Default table styles</h3>
+ <p>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.</p>
+ <table>
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Language</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Some</td>
+ <td>One</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Joe</td>
+ <td>Sixpack</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Stu</td>
+ <td>Dent</td>
+ <td>Code</td>
+ </tr>
+ </tbody>
+ </table>
+<pre class="prettyprint linenums">
+<table>
+ ...
+</table></pre>
+ <h3>2. Zebra-striped</h3>
+ <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Language</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Some</td>
+ <td>One</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Joe</td>
+ <td>Sixpack</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Stu</td>
+ <td>Dent</td>
+ <td>Code</td>
+ </tr>
+ </tbody>
+ </table>
+ <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
<pre class="prettyprint linenums">
<table class="zebra-striped">
...
</table></pre>
- <h3>Example: Zebra-striped w/ TableSorter.js</h3>
-
<p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
-
<table class="zebra-striped" id="sortTableExample">
- <thead>
- <tr>
- <th>#</th>
- <th class="yellow">First Name</th>
- <th class="blue">Last Name</th>
- <th class="green">Language</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Your</td>
- <td>One</td>
- <td>English</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Joe</td>
- <td>Sixpack</td>
- <td>English</td>
- </tr>
- <tr>
- <td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>Code</td>
- </tr>
- </tbody>
- </table>
+ <h3>3. Zebra-striped w/ TableSorter.js</h3>
+ <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
+ <table class="zebra-striped" id="sortTableExample">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th class="yellow">First Name</th>
+ <th class="blue">Last Name</th>
+ <th class="green">Language</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Your</td>
+ <td>One</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Joe</td>
+ <td>Sixpack</td>
+ <td>English</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Stu</td>
+ <td>Dent</td>
+ <td>Code</td>
+ </tr>
+ </tbody>
+ </table>
<pre class="prettyprint linenums">
<script src="js/jquery/jquery.tablesorter.min.js"></script>
<script >
<table class="zebra-striped">
...
</table></pre>
- </div>
- </div><!-- /row -->
+
</section>
projects / thirdparty / bootstrap.git / commitdiff
