{"id":5415,"date":"2025-08-04T10:35:44","date_gmt":"2025-08-04T08:35:44","guid":{"rendered":"https:\/\/www.periferieprahy.cz\/blog\/?p=5415"},"modified":"2025-08-08T06:13:03","modified_gmt":"2025-08-08T04:13:03","slug":"nebojte-se-kratkych-kodu-2","status":"publish","type":"post","link":"https:\/\/www.periferieprahy.cz\/blog\/2025\/08\/04\/nebojte-se-kratkych-kodu-2\/","title":{"rendered":"Nebojte se kr\u00e1tk\u00fdch k\u00f3du – 8. tabulky"},"content":{"rendered":"\n

Tabulka pomoc\u00ed kr\u00e1tk\u00e9ho k\u00f3du<\/h3>\n\n\n\n

V p\u0159\u00edpad\u011b tabulek bych nev\u00e1hal zavrhnout pou\u017e\u00edv\u00e1n\u00ed nab\u00edzen\u00e9ho kr\u00e1tk\u00e9ho k\u00f3du<\/a>. V\u011bt\u0161inu nakonec mus\u00edte vyplnit v HTML. Tady je jednoduch\u00e1 tabulka vytvo\u0159en\u00e1 pomoc\u00ed kr\u00e1tk\u00e9ho k\u00f3du. Zkuste si p\u0159epnout do tmav\u00e9ho re\u017eimu. Upravit, aby byl text \u010diteln\u00fd i v tomto re\u017eimu to nen\u00ed snadn\u00e9, nato\u017e doplnit data do tabulky.<\/p>\n\n\n

\n\n\n\n
Tabulka<\/td>\nTabulka<\/td>\n<\/tr>\n
Tabulka<\/td>\nTabulka<\/td>\n<\/tr>\n<\/table>\n<\/div>\n\n\n\n

Takhle vypad\u00e1 kr\u00e1tk\u00fd k\u00f3d a vy mus\u00edte nahradit v\u0161echny v\u00fdrazy mezi tagy <td> Tabulka <\/td> skute\u010dn\u00fdmi hodnotami v jednotliv\u00fdch bu\u0148k\u00e1ch tabulky:<\/p>\n\n\n\n

[su_table responsive=\"yes\"]<table>\n<tr>\n\t<td>Tabulka<\/td>\n\t<td>Tabulka<\/td>\n<\/tr>\n<tr>\n\t<td>Tabulka<\/td>\n\t<td>Tabulka<\/td>\n<\/tr>\n<\/table>[\/su_table]<\/code><\/pre>\n\n\n\n
Tabulky z nab\u00eddky blok\u016f<\/h3>\n\n\n\n
Proto se p\u0159ikl\u00e1n\u00edm k tomu, vyu\u017e\u00edt  tabulku z nab\u00eddky blok\u016f:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Budete vyzv\u00e1ni k zad\u00e1n\u00ed po\u010dtu sloupc\u016f a \u0159\u00e1dk\u016f. J\u00e1 volil t\u0159i sloupce a t\u0159i \u0159\u00e1dky a stiskl „Vytvo\u0159it“. \u0158\u00e1dky i sloupce m\u016f\u017eete v budoucnu dopl\u0148ovat \u010di ru\u0161it. V prav\u00e9m menu „Blok“ jsem zvolil barvu pozad\u00ed sv\u011btle modro zelenou (m\u016f\u017eete dle libosti, ale volte sv\u011btlej\u0161\u00ed odst\u00edny), V „Nastaven\u00ed“ vypn\u011bte<\/strong> „Nastavit pevnou \u0161\u00ed\u0159ku bun\u011bk tabulky“ Zapn\u011bte „Z\u00e1hlav\u00ed“ a m\u016f\u017eete p\u0159idat i „Z\u00e1pat\u00ed“, jako v m\u00e9m p\u0159\u00edpad\u011b. Ve „Stylech“ v prav\u00e9m menu zvolte barvu textu \u010dernou. a vyzkou\u0161ejte i styl „Pruhy“<\/p>\n\n\n\n
Z\u00e1hlav\u00ed1<\/th>Z\u00e1hlav\u00ed2<\/th>Z\u00e1hlav\u00ed3<\/th><\/tr><\/thead>
Data1<\/td>Data2<\/td>Data3<\/td><\/tr>
Data4<\/td>Data5<\/td>Data6<\/td><\/tr>
Data7<\/td>Data8<\/td>Data9<\/td><\/tr><\/tbody>
Toto je z\u00e1pat\u00ed1<\/td>Toto je z\u00e1pat\u00ed2<\/td>Toto je z\u00e1pat\u00ed3<\/td><\/tr><\/tfoot><\/table><\/figure>\n\n\n\n
Tady je styl „Pruhy“. Doporu\u010duji v menu tabulky zvolit zarovn\u00e1n\u00ed na st\u0159ed a tady je v\u00fdsledek:<\/p>\n\n\n\n
Z\u00e1hlav\u00ed1<\/th>Z\u00e1hlav\u00ed2<\/th>Z\u00e1hlav\u00ed3<\/th><\/tr><\/thead>
D<\/em><\/strong>ata1<\/td>Data2<\/td>Data3<\/td><\/tr>
Data4<\/td>Data5<\/td>Data6<\/td><\/tr>
Data7<\/td>Data8<\/td>Data9<\/td><\/tr><\/tbody>
Toto je z\u00e1pat\u00ed1<\/td>Toto je z\u00e1pat\u00ed2<\/td>Toto je z\u00e1pat\u00ed3<\/td><\/tr><\/tfoot><\/table><\/figure>\n\n\n\n
Tabulka se stala p\u0159ehledn\u011bj\u0161\u00ed a m\u011bn\u00ed sv\u016fj rozm\u011br podle podle obsahu textu v bu\u0148ce. A je responsivn\u00ed. Doporu\u010duji v\u0161ak, nevkl\u00e1dat do bun\u011bk p\u0159\u00edli\u0161 dlouh\u00e9 texty, proto\u017ee se tabulka stane na mal\u00fdch za\u0159\u00edzen\u00edch nep\u0159ehlednou.<\/p>\n\n\n\n
Tabulka pomoc\u00ed kr\u00e1tk\u00e9ho k\u00f3du Ninja Tables<\/h3>\n\n\n\n
Kdo chce m\u00edt tabulky j\u00f3 n\u00f3bl, doporu\u010duji si vyzkou\u0161et plugin „Ninja Tables<\/a>„. Tady jen uk\u00e1zky jak to m\u016f\u017ee vypadat:<\/p>\n\n\n
\n    
Time<\/span><\/div><\/div><\/div><\/td>
Saturday<\/span><\/div><\/div><\/div><\/td>
Sunday<\/span><\/div><\/div><\/div><\/td>
Monday<\/span><\/div><\/div><\/div><\/td>
Tuesday<\/span><\/div><\/div><\/div><\/td>
Wednesday<\/span><\/div><\/div><\/div><\/td>
Thursday<\/span><\/div><\/div><\/div><\/td>
Friday<\/span><\/div><\/div><\/div><\/td><\/tr>
10:00AM - 11:30AM<\/span><\/div><\/div><\/div><\/td>
Physics<\/span><\/div><\/div><\/div><\/td>
Math<\/span><\/div><\/div><\/div><\/td>
Physics<\/span><\/div><\/div><\/div><\/td>
Chemistry<\/span><\/div><\/div><\/div><\/td>
Geometry<\/span><\/div><\/div><\/div><\/td>
Statistics<\/span><\/div><\/div><\/div><\/td>
<\/span><\/span><\/span><\/div><\/div><\/div><\/td><\/tr>
10:00AM - 11:30AM<\/span><\/div><\/div><\/div><\/td>
Physics<\/span><\/div><\/div><\/div><\/td>
Math<\/span><\/div><\/div><\/div><\/td>
Physics<\/span><\/div><\/div><\/div><\/td>
Chemistry<\/span><\/div><\/div><\/div><\/td>
Geometry<\/span><\/div><\/div><\/div><\/td>
Statistics<\/span><\/div><\/div><\/div><\/td>
<\/span><\/span><\/span><\/div><\/div><\/div><\/td><\/tr>
11:40AM - 1:00PM<\/span><\/div><\/div><\/div><\/td>
Math<\/span><\/div><\/div><\/div><\/td>
Physics<\/span><\/div><\/div><\/div><\/td>
Chemistry<\/span><\/div><\/div><\/div><\/td>
<\/span><\/span><\/span><\/div><\/div><\/div><\/td>
Statistics<\/span><\/div><\/div><\/div><\/td>
Geometry<\/span><\/div><\/div><\/div><\/td>
Economics<\/span><\/div><\/div><\/div><\/td><\/tr>
2:00PM - 2:50PM<\/span><\/div><\/div><\/div><\/td>
Group Discussion<\/span><\/div><\/div><\/div><\/td>
Science<\/span><\/div><\/div><\/div><\/td>
English<\/span><\/div><\/div><\/div><\/td>
Language<\/span><\/div><\/div><\/div><\/td>
Group Discussion<\/span><\/div><\/div><\/div><\/td>
Language<\/span><\/div><\/div><\/div><\/td>
Group Discussion<\/span><\/div><\/div><\/div><\/td><\/tr>
11:40AM - 1:00PM<\/span><\/div><\/div><\/div><\/td>
Math<\/span><\/div><\/div><\/div><\/td>
Physics<\/span><\/div><\/div><\/div><\/td>
Chemistry<\/span><\/div><\/div><\/div><\/td>
<\/span><\/span><\/span><\/div><\/div><\/div><\/td>
Statistics<\/span><\/div><\/div><\/div><\/td>
Geometry<\/span><\/div><\/div><\/div><\/td>
Economics<\/span><\/div><\/div><\/div><\/td><\/tr>
11:40AM - 1:00PM<\/span><\/div><\/div><\/div><\/td>
Math<\/span><\/div><\/div><\/div><\/td>
Physics<\/span><\/div><\/div><\/div><\/td>
Chemistry<\/span><\/div><\/div><\/div><\/td>
<\/span><\/span><\/span><\/div><\/div><\/div><\/td>
Statistics<\/span><\/div><\/div><\/div><\/td>
Geometry<\/span><\/div><\/div><\/div><\/td>
Economics<\/span><\/div><\/div><\/div><\/td><\/tr>
3:00PM - 4:00PM<\/span><\/div><\/div><\/div><\/td>
Cultural Activities<\/span><\/div><\/div><\/div><\/td>
Cultural Activities<\/span><\/div><\/div><\/div><\/td>
Cultural Activities<\/span><\/div><\/div><\/div><\/td>
Cultural Activities<\/span><\/div><\/div><\/div><\/td>
Cultural Activities<\/span><\/div><\/div><\/div><\/td>
Cultural Activities<\/span><\/div><\/div><\/div><\/td>
Cultural Activities<\/span><\/div><\/div><\/div><\/td><\/tr>
11:40AM - 1:00PM<\/span><\/div><\/div><\/div><\/td>
Math<\/span><\/div><\/div><\/div><\/td>
Physics<\/span><\/div><\/div><\/div><\/td>
Chemistry<\/span><\/div><\/div><\/div><\/td>
<\/span><\/span><\/span><\/div><\/div><\/div><\/td>
Statistics<\/span><\/div><\/div><\/div><\/td>
Geometry<\/span><\/div><\/div><\/div><\/td>
Economics<\/span><\/div><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n\n\n\n
\n    
Product 1<\/span><\/div><\/div><\/div><\/td>
Product 2<\/span><\/div><\/div><\/div><\/td>
Product 3<\/span><\/div><\/div><\/div><\/td><\/tr>
  • Feature 1<\/span><\/li>
  • Feature 2<\/span><\/li>
  • Feature 3<\/span><\/li>
  • Feature 4<\/span><\/li><\/ul><\/span><\/div><\/div><\/div><\/td>
  • Feature 1<\/span><\/li>
  • Feature 2<\/span><\/li>
  • Feature 3<\/span><\/li>
  • Feature 4<\/span><\/li><\/ul><\/span><\/div><\/div><\/div><\/td>
  • Feature 1<\/span><\/li>
  • Feature 2<\/span><\/li>
  • Feature 3<\/span><\/li>
  • Feature 4<\/span><\/li><\/ul><\/span><\/div><\/div><\/div><\/td><\/tr>
<\/path><\/svg><\/path><\/svg><\/i><\/span><\/path><\/svg><\/path><\/svg><\/i><\/span><\/path><\/svg><\/path><\/svg><\/i><\/span><\/path><\/svg><\/path><\/svg><\/i><\/span><\/path><\/svg><\/path><\/svg><\/i><\/span><\/div><\/span><\/div><\/div><\/div><\/td>
<\/path><\/svg><\/path><\/svg><\/i><\/i><\/span><\/path><\/svg><\/path><\/svg><\/i><\/span><\/path><\/svg><\/path><\/svg><\/i><\/span><\/path><\/svg><\/path><\/svg><\/i><\/span><\/path><\/svg><\/path><\/svg><\/i><\/span><\/div><\/span><\/div><\/div><\/div><\/td>
<\/path><\/svg><\/path><\/svg><\/i><\/span><\/path><\/svg><\/path><\/svg><\/i><\/span><\/path><\/svg><\/path><\/svg><\/i><\/span><\/path><\/svg><\/path><\/svg><\/i><\/i><\/span><\/path><\/svg><\/path><\/svg><\/i><\/span><\/div><\/span><\/div><\/div><\/div><\/td><\/tr>