{"id":3167,"date":"2019-07-04T14:02:01","date_gmt":"2019-07-04T14:02:01","guid":{"rendered":"https:\/\/www.internationalbasketballacademy.it\/2019\/07\/04\/table\/"},"modified":"2019-07-04T14:02:01","modified_gmt":"2019-07-04T14:02:01","slug":"table","status":"publish","type":"post","link":"https:\/\/www.internationalbasketballacademy.it\/en_us\/2019\/07\/04\/table\/","title":{"rendered":"Table"},"content":{"rendered":"

Easily create nicely looking tables, which come in different styles.<\/p>\n

Usage<\/a><\/h2>\n

To apply this component, add the .uk-table<\/code> class to a table. The table rows will be separated by lines.<\/p>\n

Example<\/h3>\n
\n\n\n\n\n\n\n\n\n\n
Table caption<\/caption>\n
Table Heading<\/th>\nTable Heading<\/th>\nTable Heading<\/th>\n<\/tr>\n<\/thead>\n
Table Footer<\/td>\nTable Footer<\/td>\nTable Footer<\/td>\n<\/tr>\n<\/tfoot>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n

Markup<\/h3>\n
<table<\/span> class<\/span>=\"uk-table\"<\/span>><\/span>\r\n    <caption<\/span>><\/span>...<\/caption<\/span>><\/span>\r\n    <thead<\/span>><\/span>\r\n        <tr<\/span>><\/span>\r\n            <th<\/span>><\/span>...<\/th<\/span>><\/span>\r\n        <\/tr<\/span>><\/span>\r\n    <\/thead<\/span>><\/span>\r\n    <tfoot<\/span>><\/span>\r\n        <tr<\/span>><\/span>\r\n            <td<\/span>><\/span>...<\/td<\/span>><\/span>\r\n        <\/tr<\/span>><\/span>\r\n    <\/tfoot<\/span>><\/span>\r\n    <tbody<\/span>><\/span>\r\n        <tr<\/span>><\/span>\r\n            <td<\/span>><\/span>...<\/td<\/span>><\/span>\r\n        <\/tr<\/span>><\/span>\r\n    <\/tbody<\/span>><\/span>\r\n<\/table<\/span>><\/span><\/code><\/pre>\n
\n
Columns<\/h3>\n
To modify the column width or content, you can use other components. Here are some useful examples:<\/p>\n
\n\n\n\n\n\n\n\n
Style<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
Column width<\/em><\/td>\nAdd one of the .uk-width-*<\/code> classes from the Grid component<\/a>.<\/td>\n<\/tr>\n
Text alignment<\/em><\/td>\nAdd the .uk-text-left<\/code>, .uk-text-right<\/code> or .uk-text-center<\/code> class from the Text component<\/a>.<\/td>\n<\/tr>\n
Text style<\/em><\/td>\nTake a look at the Text component<\/a>. For example add the .uk-text-bold<\/code> class.<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n
Markup<\/h4>\n
<td<\/span> class<\/span>=\"uk-width-1-10 uk-text-right\"<\/span>><\/span>...<\/td<\/span>><\/span>\r\n<td<\/span> class<\/span>=\"uk-width-9-10 uk-text-bold\"<\/span>><\/span>...<\/td<\/span>><\/span><\/code><\/pre>\n
\n
Vertical modifier<\/h3>\n
To vertically center table content, just add the .uk-table-middle<\/code> class to the <tr><\/code> or <td><\/code> elements.<\/p>\n
\n
Modifiers<\/a><\/h2>\n
To display the table in a different style, just add a modifier to the the .uk-table<\/code> class.<\/p>\n
Table hover<\/h3>\n
Add the .uk-table-hover<\/code> class to display a hover state on table rows.<\/p>\n
Example<\/h4>\n
\n\n\n\n\n\n\n\n
Table Heading<\/th>\nTable Heading<\/th>\nTable Heading<\/th>\n<\/tr>\n<\/thead>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n
Markup<\/h4>\n
<table<\/span> class<\/span>=\"uk-table uk-table-hover\"<\/span>><\/span>...<\/table<\/span>><\/span><\/code><\/pre>\n
\n
Table striped<\/h3>\n
Add zebra-striping to a table by adding the .uk-table-striped<\/code> class.<\/p>\n
Example<\/h4>\n
\n\n\n\n\n\n\n\n
Table Heading<\/th>\nTable Heading<\/th>\nTable Heading<\/th>\n<\/tr>\n<\/thead>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n
Markup<\/h4>\n
<table<\/span> class<\/span>=\"uk-table uk-table-striped\"<\/span>><\/span>...<\/table<\/span>><\/span><\/code><\/pre>\n
\n
Table condensed<\/h3>\n
Add the .uk-table-condensed<\/code> class to make table cells more compact.<\/p>\n
Example<\/h4>\n
\n\n\n\n\n\n\n\n
Table Heading<\/th>\nTable Heading<\/th>\nTable Heading<\/th>\n<\/tr>\n<\/thead>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n
Markup<\/h4>\n
<table<\/span> class<\/span>=\"uk-table uk-table-condensed\"<\/span>><\/span>...<\/table<\/span>><\/span><\/code><\/pre>\n
\n
Combine modifiers<\/h3>\n
The modifiers of the Table component are combinable with each other.<\/p>\n
Example<\/h4>\n
\n\n\n\n\n\n\n\n
Table Heading<\/th>\nTable Heading<\/th>\nTable Heading<\/th>\n<\/tr>\n<\/thead>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n
Markup<\/h4>\n
<table<\/span> class<\/span>=\"uk-table uk-table-hover uk-table-striped uk-table-condensed\"<\/span>><\/span>...<\/table<\/span>><\/span><\/code><\/pre>\n
\n
Responsive Table<\/a><\/h2>\n
If your table happens to be wider that its container element or would eventually get too big on a specific viewport width, just wrap it inside a <div><\/code> element and add the .uk-overflow-container<\/code> class. This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself.<\/p>\n
Example<\/h3>\n
\n\n\n\n\n\n\n\n\n\n
Table Heading<\/th>\nTable Heading<\/th>\nTable Heading<\/th>\nTable Heading<\/th>\nTable Heading<\/th>\nTable Heading<\/th>\nTable Heading<\/th>\nTable Heading<\/th>\n<\/tr>\n<\/thead>\n
Table Footer<\/td>\nTable Footer<\/td>\nTable Footer<\/td>\nTable Footer<\/td>\nTable Footer<\/td>\nTable Footer<\/td>\nTable Footer<\/td>\nTable Footer<\/td>\n<\/tr>\n<\/tfoot>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n
Table Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\nTable Data<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n
Markup<\/h4>\n
<div<\/span> class<\/span>=\"uk-overflow-container\"<\/span>><\/span>\r\n    <table<\/span>><\/span>...<\/table<\/span>><\/span>\r\n<\/div<\/span>><\/span><\/code><\/pre>","protected":false},"excerpt":{"rendered":"
Easily create nicely looking tables, which come in different styles. Usage To apply this component, add the .uk-table class to a table. […]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[74],"tags":[],"class_list":["post-3167","post","type-post","status-publish","format-standard","hentry","category-demo"],"_links":{"self":[{"href":"https:\/\/www.internationalbasketballacademy.it\/en_us\/wp-json\/wp\/v2\/posts\/3167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.internationalbasketballacademy.it\/en_us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.internationalbasketballacademy.it\/en_us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.internationalbasketballacademy.it\/en_us\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.internationalbasketballacademy.it\/en_us\/wp-json\/wp\/v2\/comments?post=3167"}],"version-history":[{"count":0,"href":"https:\/\/www.internationalbasketballacademy.it\/en_us\/wp-json\/wp\/v2\/posts\/3167\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.internationalbasketballacademy.it\/en_us\/wp-json\/wp\/v2\/media?parent=3167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.internationalbasketballacademy.it\/en_us\/wp-json\/wp\/v2\/categories?post=3167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.internationalbasketballacademy.it\/en_us\/wp-json\/wp\/v2\/tags?post=3167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}