From: Mark Otto Date: Mon, 17 Oct 2011 21:43:43 +0000 (-0700) Subject: overhauled tables section of docs to minize copy and emphasize code X-Git-Tag: v2.0.0~6^2~462 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b91d210a3cdb29d022f20646ed61e663ceea18dd;p=thirdparty%2Fbootstrap.git overhauled tables section of docs to minize copy and emphasize code --- diff --git a/docs/index.html b/docs/index.html index 2e0036bb09..68cdd4a2cf 100644 --- a/docs/index.html +++ b/docs/index.html @@ -638,10 +638,14 @@ <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.

@@ -712,130 +716,204 @@

Tables For, you guessed it, tabular data

- + +

Table markup

-
-

Building tables

-

- <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>.

-
-
-

Example: Default table styles

-

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 NameLast NameLanguageTagDescription
1SomeOneEnglish + <table> + + Wrapping element for displaying data in a tabular format +
2JoeSixpackEnglish + <thead> + + Container element for table header rows (<tr>) to label table columns +
3StuDentCode + <tbody> + + Container element for table rows (<tr>) in the body of the table +
-
-<table>
-  ...
-</table>
-

Example: Zebra-striped

-

Get a little fancy with your tables by adding zebra-striping—just add the .zebra-striped class.

- - - - - - + + - - - - - - + + - - - - + + - - - - + +
#First NameLast NameLanguage + <tr> + + Container element for a set of table cells (<td> or <th>) that appears on a single row +
1SomeOneEnglish + <td> + + Default table cell +
2JoeSixpackEnglish + <th> + + Special table cell for column (or row, depending on scope and placement) labels
+ Must be used within a <thead> +
3StuDentCode + <caption> + + Description or summary of what the table holds, especially useful for screen readers +
-

Note: Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.

+
+
+
+<table>
+  <thead>
+    <tr>
+      <th>...</th>
+      <th>...</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>...</td>
+      <td>...</td>
+    </tr>
+  </tbody>
+</table>
+
+
+
+ +

Example tables

+

1. Default table styles

+

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 NameLast NameLanguage
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
+
+<table>
+  ...
+</table>
+

2. Zebra-striped

+

Get a little fancy with your tables by adding zebra-striping—just add the .zebra-striped class.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameLanguage
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
+

Note: Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.

 <table class="zebra-striped">
 ...
 </table>
-

Example: Zebra-striped w/ TableSorter.js

-

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 NameLast NameLanguage
1YourOneEnglish
2JoeSixpackEnglish
3StuDentCode
+

3. Zebra-striped w/ TableSorter.js

+

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 NameLast NameLanguage
1YourOneEnglish
2JoeSixpackEnglish
3StuDentCode
 <script src="js/jquery/jquery.tablesorter.min.js"></script>
 <script >
@@ -846,8 +924,7 @@
 <table class="zebra-striped">
   ...
 </table>
- - +