diff options
| author | Mark Otto <[email protected]> | 2012-06-09 13:15:28 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-06-09 13:15:28 -0700 |
| commit | ca63ea2f26facca1510390f85eed77d55f8f2b89 (patch) | |
| tree | e363ce422db20d3bb7b28815e55e3cea013e98c0 /docs/base-css.html | |
| parent | aff3694f28946a0640f15dc07591dbfb332fcbaf (diff) | |
| download | bootstrap-ca63ea2f26facca1510390f85eed77d55f8f2b89.tar.xz bootstrap-ca63ea2f26facca1510390f85eed77d55f8f2b89.zip | |
overhaul tables docs for more streamlined content
Diffstat (limited to 'docs/base-css.html')
| -rw-r--r-- | docs/base-css.html | 299 |
1 files changed, 105 insertions, 194 deletions
diff --git a/docs/base-css.html b/docs/base-css.html index 084654b27..71f8da87e 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -435,150 +435,8 @@ For example, <code>section</code> should be wrapped as inline. <h1>Tables <small>For, you guessed it, tabular data</small></h1> </div> - - - <h2>Table markup</h2> - - <table class="table table-bordered table-striped"> - <colgroup> - <col class="span1"> - <col class="span7"> - </colgroup> - <thead> - <tr> - <th>Tag</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <code><table></code> - </td> - <td> - Wrapping element for displaying data in a tabular format - </td> - </tr> - <tr> - <td> - <code><thead></code> - </td> - <td> - Container element for table header rows (<code><tr></code>) to label table columns - </td> - </tr> - <tr> - <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> -<pre class="prettyprint linenums"> -<table> - <thead> - <tr> - <th>…</th> - <th>…</th> - </tr> - </thead> - <tbody> - <tr> - <td>…</td> - <td>…</td> - </tr> - </tbody> -</table> -</pre> - - - <h2>Table options</h2> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th>Name</th> - <th>Class</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>Default</td> - <td class="muted">None</td> - <td>No styles, just columns and rows</td> - </tr> - <tr> - <td>Basic</td> - <td> - <code>.table</code> - </td> - <td>Only horizontal lines between rows</td> - </tr> - <tr> - <td>Bordered</td> - <td> - <code>.table-bordered</code> - </td> - <td>Rounds corners and adds outer border</td> - </tr> - <tr> - <td>Zebra-stripe</td> - <td> - <code>.table-striped</code> - </td> - <td>Adds light gray background color to odd rows (1, 3, 5, etc)</td> - </tr> - <tr> - <td>Condensed</td> - <td> - <code>.table-condensed</code> - </td> - <td>Cuts vertical padding in half, from 8px to 4px, within all <code>td</code> and <code>th</code> elements</td> - </tr> - </tbody> - </table> - - - <h2>Example tables</h2> - - <h3>1. Default table styles</h3> - <p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.</p> + <h2>Default styles</h2> + <p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>.</p> <div class="bs-docs-example"> <table class="table"> <thead> @@ -617,9 +475,15 @@ For example, <code>section</code> should be wrapped as inline. </table> </pre> - <h3>2. Striped table</h3> - <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.table-striped</code> class.</p> - <p class="muted"><strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p> + + <hr class="bs-docs-separator"> + + + <h2>Optional classes</h2> + <p>Add any of the follow classes to the <code>.table</code> base class.</p> + + <h3><code>.table-striped</code></h3> + <p>Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).</p> <div class="bs-docs-example"> <table class="table table-striped"> <thead> @@ -658,9 +522,8 @@ For example, <code>section</code> should be wrapped as inline. </table> </pre> - - <h3>3. Bordered table</h3> - <p>Add borders around the entire table and rounded corners for aesthetic purposes.</p> + <h3><code>.table-bordered</code></h3> + <p>Add borders and rounded corners to the table.</p> <div class="bs-docs-example"> <table class="table table-bordered"> <thead> @@ -703,8 +566,8 @@ For example, <code>section</code> should be wrapped as inline. </table> </pre> - <h3>4. Condensed table</h3> - <p>Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 8px to 4px).</p> + <h3><code>.table-condensed</code></h3> + <p>Makes tables more compact by cutting cell padding in half.</p> <div class="bs-docs-example"> <table class="table table-condensed"> <thead> @@ -743,48 +606,96 @@ For example, <code>section</code> should be wrapped as inline. </pre> - <h3>5. Combine them all!</h3> - <p>Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.</p> - <div class="bs-docs-example"> - <table class="table table-striped table-bordered table-condensed"> - <thead> - <tr> - <th></th> - <th colspan="2">Full name</th> - <th></th> - </tr> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> - </tr> - </thead> - <tbody> - <tr> - <tr> - <td>1</td> - <td>Mark</td> - <td>Otto</td> - <td>@mdo</td> - </tr> - <tr> - <td>2</td> - <td>Jacob</td> - <td>Thornton</td> - <td>@fat</td> - </tr> - <tr> - <td>3</td> - <td colspan="2">Larry the Bird</td> - <td>@twitter</td> - </tr> - </tbody> - </table> - </div> -<pre class="prettyprint linenums" style="margin-bottom: 18px;"> -<table class="table table-striped table-bordered table-condensed"> - ... + <hr class="bs-docs-separator"> + + + <h2>Supported table markup</h2> + <p>List of supported table HTML elements and how they should be used.</p> + <table class="table table-bordered table-striped"> + <colgroup> + <col class="span1"> + <col class="span7"> + </colgroup> + <thead> + <tr> + <th>Tag</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <code><table></code> + </td> + <td> + Wrapping element for displaying data in a tabular format + </td> + </tr> + <tr> + <td> + <code><thead></code> + </td> + <td> + Container element for table header rows (<code><tr></code>) to label table columns + </td> + </tr> + <tr> + <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> +<pre class="prettyprint linenums"> +<table> + <thead> + <tr> + <th>…</th> + <th>…</th> + </tr> + </thead> + <tbody> + <tr> + <td>…</td> + <td>…</td> + </tr> + </tbody> </table> </pre> |