From: Mark Otto Date: Sat, 7 Jan 2012 21:40:05 +0000 (-0800) Subject: more table docs cleanup X-Git-Tag: v2.0.0~6^2~341 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=28420311d89fe2656320cee7306d01a361f1c3c7;p=thirdparty%2Fbootstrap.git more table docs cleanup --- diff --git a/docs/base-css.html b/docs/base-css.html index 47858fe102..c1cb3fd2dd 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -556,211 +556,285 @@ +

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

Tables are automatically styled with only the a few borders to ensure readability and maintain structure. No classes are required.

 <table>
   ...
 </table>
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameLanguage
1MarkOttoCSS
2JacobThorntonJavascript
3StuDentHTML
+
+
-

2. Striped table

-

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

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

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

-
+  

+    

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

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

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

+    

+    

+      
+        
+          
+            
+            
+            
+            
+          
+        
+        
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+        
+      
#First NameLast NameLanguage
1MarkOttoCSS
2JacobThorntonJavascript
3StuDentHTML

+    

+  

 
-  

 
   
3. Bordered table

-  
Add borders around the entire table and between each row, plus a bit of rounded corners for aesthetic purposes.

-  
-    
-      
-        
-        
-        
-        
-      
-    
-    
-      
-        
-        
-        
-      
-      
-        
-        
-        
-        
-      
-      
-        
-        
-        
-      
-      
-        
-        
-        
-        
-      
-    
-  
#First NameLast NameLanguage
1Some OneHTML
2JoeSixpackJavascript
3JoeSixpack
3StuDentCSS

+  

+    

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

 
 <table class="bordered-table">
   ...
 </table>

+    

+    

+      
+        
+          
+            
+            
+            
+            
+          
+        
+        
+          
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+        
+      
#First NameLast NameLanguage
1Mark OttoCSS
2JacobThorntonJavascript
3StuDent
3BrosefStalinHTML

+    

+  

 
-  

 
   
4. Condensed table

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

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

-
+  

+    

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

+
 <table class="condensed-table">
   ...
 </table>

+    

+    

+      
+        
+          
+            
+            
+            
+            
+          
+        
+        
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+        
+      
#First NameLast NameLanguage
1MarkOttoCSS
2JacobThorntonJavascript
3StuDentHTML

+    

+  

+
 
-  

 
   
5. Striped table 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

+  

+    

+      
Include the jQuery Tablesorter plugin and automaically get clear styles for sorted columns.

 
-<script src="js/jquery/jquery.tablesorter.min.js"></script>
+<script src="jquery.tablesorter.js"></script>
 <script >
   $(function() {
-    $("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
+    $("table#sortTableExample")
+    .tablesorter({
+      sortList: [[1,0]]
+    });
   });
 </script>
 <table class="striped-table">
   ...
 </table>

-
+    

+    

+      
+        
+          
+            
+            
+            
+            
+          
+        
+        
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+        
+      
#First NameLast NameLanguage
1MarkOttoCSS
2JacobThorntonJavascript
3StuDentHTML
4BrosefStalinHTML

+      
Styles for the Tablesorter, zebra striping, borders, and condensing may all compound in any variation to fit your needs.

+      
+        
+          
+            
+            
+            
+            
+          
+        
+        
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+        
+      
#First NameLast NameLanguage
1MarkOttoCSS
2JacobThorntonJavascript
3StuDentHTML
4BrosefStalinHTML

+    

+  

 
 
 
@@ -1560,7 +1634,7 @@