TEST SERVER

Tables

Please note that we are deprecating Tablesorter in favor of DataTables. Please convert your app's tables when you can.

Quick Reference

General Styles

Do not style the base table element. Generic formatting table available via the display class.

Full-width tables also available: <table class='display full-width'>

For smaller text in tables: <table class='display full-width smaller-text'>

<td class='no-wrap'> can be used to avoid wrapping a td or tr element.

DataTables

To add more functionality to your table (searching, sorting), you can use DataTables:

<script type="text/javascript"> $(document).ready(function(){ $("#YOUR-TABLE-ID").DataTable(); }); </script>

Make sure your table has thead and tbody defined, and a unique id.

More on customizing DataTables:
https://datatables.net/manual/options.

Examples


Simple Table

<table class="display full-width">

Column A Column B
Nemo Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Odit Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Minima Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Enim Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Perferendis At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Itaque Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat
Vero Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat

back to top

Data-Heavy Table

<table class="display full-width smaller-text">

Column A Column B Column C Column D
Nemo Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Explicabo Tai fiktyvus tekstas naudojamas spaudos ir grafinio dizaino pasaulyje jau nuo XVI a. pradžios.
Odit Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Dolorem Lorem Ipsum tapo standartiniu fiktyviu tekstu, kai nežinomas spaustuvininkas atsitiktine tvarka išdėliojo raides atspaudų prese ir tokiu būdu sukūrė raidžių egzempliorių.
Minima Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nostrum Šis tekstas išliko beveik nepasikeitęs ne tik penkis amžius, bet ir įžengė i kopiuterinio grafinio dizaino laikus. Jis išpopuliarėjo XX a.
Enim Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Nulla šeštajame dešimtmetyje, kai buvo išleisti Letraset lapai su Lorem Ipsum ištraukomis, o vėliau -leidybinė sistema AldusPageMaker, kurioje buvo ir Lorem Ipsum versija.
Perferendis At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Officia Daug kas galvoja, kad Lorem Ipsum - tai vien tik atsitiktinai surinktas tekstas, bet taip nėra. Jo šaknis galima rasti klasikiniame Lotynų kalba parašytame kūrinyje, išleistame 45 pr. m. e., t.y. prieš du tūkstančius metų.
Itaque Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat Reiciendis Richard McClintock, lotynų kalbos profesorius Hampden-Sydney (JAV) koledže, išrinko vieną iš neaiškesnių žodžių iš Lorem Ipsum ištraukos - „consectetur“, ir ėmėsi ieškoti jo klasikinėje lotynų kalbos literatūroje. Tokiu būdu jis rado neabejotiną šio žodžio ir Lorem Ipsum šaltinį knygos „de Finibus Bonorum et Malorum“ (Apie gėrio ir blogio ribas) 1.10.32 ir 1.10.33 pastraipose. Kūrinio autorius – Ciceronas, parašęs jį 45 pr.
Vero Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat Alias Šis etikos teorijos traktatas buvo labai populiarus Renesanso laikais. Pirmoji Lorem Ipsum teksto eilutė, „Lorem ipsum dolor sit amet..“ sukurta remiantis 1.10.32 pastraipa.

back to top

Complicated Table

A handy reference of Generation 1 Pokémon

Number Image Name Type Description (Wrap) Alternate Name (Don't Wrap)
001 [copyrighted] Bulbasaur Grass, Poison Resembles a frog-cat with a bud on its back that looks like a hybrid of a steamed bun and a tamal. I'm hungry. Tamalbao
002 [copyrighted] Ivysaur Grass, Poison Frog-cat with a tulip on its back. Tulipsaur
003 [copyrighted] Venusaur Grass, Poison Frog-cat with an appendage that appears to be some sort of fruity drink umbrella and/or kids' water park prop. Maitaisaur
004 [copyrighted] Charmander Fire If you don't know what Charmander looks like, I'm not sure what more can be done for you. N/A
005 [copyrighted] Charmeleon Fire Like Charmander, but less cute and more fire-tail-y. Ander (no charm.)
006 [copyrighted] Charizard Fire, Flying A very large and surprisingly unintimidating dragon. Meh.
007 [copyrighted] Squirtle Water Adorable turtle in prime hug position. N/A
008 [copyrighted] Wartortle Water Angry Squirtle with ears. Squ-ear-tle
009 [copyrighted] Blastoise Water I spent far too long researching niche characters from the Teengage Mutant Ninja Turtles trying to figure out what this thing looks like. Blahtortle
010 [copyrighted] Caterpie Bug Looks like one of those glow worm toys that were popular in the 80s. Caterpillar (that's what it is.)
011 [copyrighted] Metapod Bug Hilariously uncompelling green thing that looks suspeiciously like a banana and/or new age yoga prop. WTHpod
012 [copyrighted] Butterfree Bug, Flying The least chill butterfly you can imagine. N/A
013 [copyrighted] Weedle Bug, Poison Nondescript larva wearing party hat. Confusing. Squishy
014 [copyrighted] Kakuna Bug, Poison Surpisingly more menacing than Weedle. Also seems to get really angry. Rage-le
015 [copyrighted] Beedrill Bug, Poison A wasp with moth wings, stinger hands, and mosquito feet Pastichedrill
016 [copyrighted] Pidgey Normal, Flying Contrary to the name, this bird looks more like a hawk than a pigeon. She also looks like she is reclaiming her time. Maxine Hawkers
017 [copyrighted] Pidgeotto Normal, Flying Like Pidgey, only in flight. N/A
018 [copyrighted] Pidgeot Normal, Flying Like Pidgeotto, but more flamboyant Pidgeotto sounds about right.
019 [copyrighted] Rattata Normal Resembles a purple chipmunk with one terrifying tooth One-tooth
020 [copyrighted] Raticate Normal A very angry teddy bear hamster Two-teeth
021 [copyrighted] Spearow Normal, Flying Resembles one bird dressed up as another bird for Halloween. N/A
022 [copyrighted] Fearow Normal, Flying Basically a vulture with a waterfoul head and Foghorn Leghorn hair. N/A
023 [copyrighted] Ekans Poison A purple snake Purplesnake
024 [copyrighted] Arbok Poison A hooded snake serving you fake jack-o-lantern face realness. Dragsnake

back to top