W3.CSS tabulky
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
| Bo | Nilsson | 50 |
| Mike | Ross | 35 |
Třídy tabulky W3.CSS
W3.CSS poskytuje následující třídy pro tabulky:
| Třída | Definuje |
|---|---|
| w3-tabulka | Kontejner pro HTML tabulku |
| w3-pruhované | Pruhovaný stůl |
| w3-hranice | Ohraničený stůl |
| w3-ohraničený | Ohraničené čáry |
| w3-střed | Obsah tabulky na střed |
| w3-hoverable | Posuvný stůl |
| w3-table-all | Všechny vlastnosti nastaveny |
Základní tabulka
Třída w3-table se používá k zobrazení základní tabulky:
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
Pruhovaný stůl
Třída w3-striped se používá k přidání pruhů zebry do tabulky:
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table w3-striped">
Ohraničený stůl
Třída w3-bordered přidá spodní ohraničení ke každému řádku tabulky:
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table w3-bordered">
Pruhovaný ohraničený stůl
Zkombinujte třídu w3-striped a třídu w3-bordered a vytvořte prokládanou ohraničenou tabulku:
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table w3-striped w3-bordered">
Hranice kolem stolu
Třída w3-border se používá k zobrazení ohraničení kolem tabulky:
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table w3-striped w3-border">
Tip: Třída w3-border není jen pro tabulky. Lze jej použít na jakýkoli prvek HTML!
Zobrazení všeho
Třída w3-table-all kombinuje všechny výše uvedené třídy:
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table-all">
Obracení pruhů
Chcete-li pruhy otočit (začněte světle šedou barvou), přidejte kolem řádku záhlaví tabulky prvek <thead>. Musíte také definovat barvu, která se použije pro řádek záhlaví tabulky:
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
| Bo | Nilson | 35 |
Příklad
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
Centrování veškerého obsahu
Třída w3-centred vystředí obsah tabulky:
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table-all w3-centered">
Vystředění jednoho sloupce
Třída w3-center vystředí obsah sloupce:
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table-all">
<tr>
<th>First
Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
Zarovnat jeden sloupec doprava
Třída w3-right-align right zarovná obsah sloupce:
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
Posuvný stůl
Třída w3-hoverable přidá při přejetí myší šedou barvu pozadí:
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table-all
w3-hoverable">
Vznášet barvy
Pokud chcete konkrétní barvu přechodu, přidejte do každého prvku <tr> kteroukoli z tříd w3-hover- color :
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<tr class="w3-hover-green">
Kombinace tříd W3.CSS
Mnoho tříd W3.CSS lze použít na všechny prvky HTML.
Například: třídy okrajů, třídy barev, třídy písem, třídy karet a další.
Barevné záhlaví tabulky
K zobrazení barevného řádku použijte kteroukoli z barevných tříd w3 :
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
Barevný stůl
K zobrazení barevné tabulky použijte kteroukoli z barevných tříd w3- :
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table w3-blue">
Responzivní tabulka
Třída w3-responsive vytvoří responzivní tabulku. Tabulka se pak bude na malých obrazovkách posouvat vodorovně. Při sledování na velkých obrazovkách není rozdíl.
Změňte velikost obrazovky, abyste viděli efekt v tabulce níže:
| Jméno | Příjmení | Body | Body | Body | Body | Body | Body | Body | Body | Body | Body | Body |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Kovář | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| Předvečer | Jacksone | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| Adame | Johnson | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
Příklad
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>
Stůl jako karta
Použijte třídu w3-card k zobrazení stolu jako karty:
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table-all w3-card-4">
Malý stůl
Použijte třídu w3-tiny k zobrazení malé tabulky:
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table-all w3-tiny">
Malý stůl
K zobrazení malé tabulky použijte třídu w3-small :
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table-all w3-small">
Velký stůl
K zobrazení velké tabulky použijte třídu w3-large :
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table-all w3-large">
XLarge stůl
K zobrazení tabulky xlarge použijte třídu w3-xlarge :
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table-all w3-xlarge">
XXLarge stůl
K zobrazení tabulky xxlarge použijte třídu w3-xxlarge :
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table-all w3-xxlarge">
XXXVelký stůl
K zobrazení tabulky xxxlarge použijte třídu w3-xxxlarge :
| Jméno | Příjmení | Body |
|---|---|---|
| Jill | Kovář | 50 |
| Předvečer | Jacksone | 94 |
| Adame | Johnson | 67 |
Příklad
<table class="w3-table-all w3-xxxlarge">
Jumbo stůl
Use the w3-jumbo class to display a jumbo large table:
| First Name | Last Name |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| Adam | Johnson |
Example
<table class="w3-table-all w3-jumbo">