From: Mark Otto Date: Sat, 9 Jun 2012 20:15:28 +0000 (-0700) Subject: overhaul tables docs for more streamlined content X-Git-Tag: v2.1.0~2^2~291 X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=ca63ea2f26facca1510390f85eed77d55f8f2b89;p=thirdparty%2Fbootstrap.git overhaul tables docs for more streamlined content --- diff --git a/docs/base-css.html b/docs/base-css.html index 084654b27a..71f8da87e5 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.

Tables For, you guessed it, tabular data

- - -

Table markup

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TagDescription
- <table> - - Wrapping element for displaying data in a tabular format -
- <thead> - - Container element for table header rows (<tr>) to label table columns -
- <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>
-
- - -

Table options

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameClassDescription
DefaultNoneNo styles, just columns and rows
Basic - .table - Only horizontal lines between rows
Bordered - .table-bordered - Rounds corners and adds outer border
Zebra-stripe - .table-striped - Adds light gray background color to odd rows (1, 3, 5, etc)
Condensed - .table-condensed - Cuts vertical padding in half, from 8px to 4px, within all td and th elements
- - -

Example tables

- -

1. Default table styles

-

Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.

+

Default styles

+

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

@@ -617,9 +475,15 @@ For example, <code>section</code> should be wrapped as inline. </table> -

2. Striped table

-

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

-

Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.

+ +
+ + +

Optional classes

+

Add any of the follow classes to the .table base class.

+ +

.table-striped

+

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

@@ -658,9 +522,8 @@ For example, <code>section</code> should be wrapped as inline. </table> - -

3. Bordered table

-

Add borders around the entire table and rounded corners for aesthetic purposes.

+

.table-bordered

+

Add borders and rounded corners to the table.

@@ -703,8 +566,8 @@ For example, <code>section</code> should be wrapped as inline. </table> -

4. Condensed table

-

Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).

+

.table-condensed

+

Makes tables more compact by cutting cell padding in half.

@@ -743,48 +606,96 @@ For example, <code>section</code> should be wrapped as inline. -

5. Combine them all!

-

Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Full name
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-
-
-<table class="table table-striped table-bordered table-condensed">
-  ...
+  

+
+
+  
Supported table markup

+  
List of supported table HTML elements and how they should be used.

+  
+    +      +      +    
+    
+      
+        
+        
+      
+    
+    
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+    
+  




TagDescription

+          <table>
+        
+          Wrapping element for displaying data in a tabular format
+        

+          <thead>
+        
+          Container element for table header rows (<tr>) to label table columns
+        

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

 
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index ee95ac755d..5910d66bac 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -366,150 +366,8 @@
     
{{_i}}Tables For, you guessed it, tabular data{{/i}}

   
 
-
-
-  
{{_i}}Table markup{{/i}}

-
-  
-    -      -      -    
-    
-      
-        
-        
-      
-    
-    
-      
-        
-        
-      
-      
-        
-        
-      
-      
-        
-        
-      
-      
-        
-        
-      
-      
-        
-        
-      
-      
-        
-        
-      
-      
-        
-        
-      
-    
-  




{{_i}}Tag{{/i}}{{_i}}Description{{/i}}

-          <table>
-        
-          {{_i}}Wrapping element for displaying data in a tabular format{{/i}}
-        

-          <thead>
-        
-          {{_i}}Container element for table header rows (<tr>) to label table columns{{/i}}
-        

-          <tbody>
-        
-          {{_i}}Container element for table rows (<tr>) in the body of the table{{/i}}
-        

-          <tr>
-        
-          {{_i}}Container element for a set of table cells (<td> or <th>) that appears on a single row{{/i}}
-        

-          <td>
-        
-          {{_i}}Default table cell{{/i}}
-        

-          <th>
-        
-          {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}

-          {{_i}}Must be used within a <thead>{{/i}}
-        

-          <caption>
-        
-          {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}}
-        

-
-<table>
-  <thead>
-    <tr>
-      <th>…</th>
-      <th>…</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>…</td>
-      <td>…</td>
-    </tr>
-  </tbody>
-</table>
-

-
-
-  
{{_i}}Table options{{/i}}

-  
-    
-      
-        
-        
-        
-      
-    
-    
-      
-        
-        
-        
-      
-      
-        
-        
-        
-      
-      
-        
-        
-        
-      
-      
-        
-        
-        
-      
-      
-        
-        
-        
-      
-    
-  
{{_i}}Name{{/i}}{{_i}}Class{{/i}}{{_i}}Description{{/i}}
{{_i}}Default{{/i}}{{_i}}None{{/i}}{{_i}}No styles, just columns and rows{{/i}}
{{_i}}Basic{{/i}}
-          .table
-        {{_i}}Only horizontal lines between rows{{/i}}
{{_i}}Bordered{{/i}}
-          .table-bordered
-        {{_i}}Rounds corners and adds outer border{{/i}}
{{_i}}Zebra-stripe{{/i}}
-          .table-striped
-        {{_i}}Adds light gray background color to odd rows (1, 3, 5, etc){{/i}}
{{_i}}Condensed{{/i}}
-          .table-condensed
-        {{_i}}Cuts vertical padding in half, from 8px to 4px, within all td and th elements{{/i}}

-
-
-  
{{_i}}Example tables{{/i}}

-
-  
1. {{_i}}Default table styles{{/i}}

-  
{{_i}}Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.{{/i}}

+  
{{_i}}Default styles{{/i}}

+  
{{_i}}For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.{{/i}}

   

     
@@ -548,9 +406,15 @@
 </table>
 
 
-  
2. {{_i}}Striped table{{/i}}

-  
{{_i}}Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.{{/i}}

-  
{{_i}}Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.{{/i}}

+
+  

+
+
+  
{{_i}}Optional classes{{/i}}

+  
{{_i}}Add any of the follow classes to the .table base class.{{/i}}

+
+  
{{_i}}.table-striped{{/i}}

+  
{{_i}}Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).{{/i}}

     

       
   

@@ -589,9 +453,8 @@
 </table>
 
 
-
-  
3. {{_i}}Bordered table{{/i}}

-  
{{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}

+  
{{_i}}.table-bordered{{/i}}

+  
{{_i}}Add borders and rounded corners to the table.{{/i}}

     

       
   

@@ -634,8 +497,8 @@
 </table>
 
 
-  
4. {{_i}}Condensed table{{/i}}

-  
{{_i}}Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).{{/i}}

+  
{{_i}}.table-condensed{{/i}}

+  
{{_i}}Makes tables more compact by cutting cell padding in half.{{/i}}

     

       
   

@@ -674,48 +537,96 @@
 
 
 
-  
5. {{_i}}Combine them all!{{/i}}

-  
{{_i}}Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.{{/i}}

-  

-    

       

-      
-        
-          
-          
-          
-        
-        
-          
-          
-          
-          
-        
-      
-      
-        
-        
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-        
-        
-          
-          
-          
-        
-      
-    
{{_i}}Full name{{/i}}
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

-  
{{! /example }}
-
-<table class="table table-striped table-bordered table-condensed">
-  ...
+  

+
+
+  
{{_i}}Supported table markup{{/i}}

+  
{{_i}}List of supported table HTML elements and how they should be used.{{/i}}

+  
+    +      +      +    
+    
+      
+        
+        
+      
+    
+    
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+    
+  




{{_i}}Tag{{/i}}{{_i}}Description{{/i}}

+          <table>
+        
+          {{_i}}Wrapping element for displaying data in a tabular format{{/i}}
+        

+          <thead>
+        
+          {{_i}}Container element for table header rows (<tr>) to label table columns{{/i}}
+        

+          <tbody>
+        
+          {{_i}}Container element for table rows (<tr>) in the body of the table{{/i}}
+        

+          <tr>
+        
+          {{_i}}Container element for a set of table cells (<td> or <th>) that appears on a single row{{/i}}
+        

+          <td>
+        
+          {{_i}}Default table cell{{/i}}
+        

+          <th>
+        
+          {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}

+          {{_i}}Must be used within a <thead>{{/i}}
+        

+          <caption>
+        
+          {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}}
+        

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