mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-18 10:52:19 +01:00
overhauled tables section of docs to minize copy and emphasize code
This commit is contained in:
Mark Otto
parent
27cbe7f63a
commit
b91d210a3c
287
docs/index.html
287
docs/index.html
@ -638,10 +638,14 @@
|
||||
<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>
|
||||
@ -712,130 +716,204 @@
|
||||
<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>
|
||||
<tr>
|
||||
<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>
|
||||
<tr>
|
||||
<td>
|
||||
<code><td></code>
|
||||
</td>
|
||||
<td>
|
||||
Default table cell
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
<code><caption></code>
|
||||
</td>
|
||||
<td>
|
||||
Description or summary of what the table holds, especially useful for screen readers
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>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>
|
||||
</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>
|
||||
<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 >
|
||||
@ -846,8 +924,7 @@
|
||||
<table class="zebra-striped">
|
||||
...
|
||||
</table></pre>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user