PO Box 9406, Group 13, Sangkat 4, OU 5, Sihanoukville, Sihanouk Province, 18204 Cambodia
donboscocf.cambodia@gmail.com Mobile: +855 12 919 834 or +855 15 919 834

Easily create nicely looking tables, which come in different styles.

Usage

To apply this component, add the .uk-table class to a table. The table rows will be separated by lines.

Example

Table caption
Table Heading Table Heading Table Heading
Table Footer Table Footer Table Footer
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Markup

<table class="uk-table">
    <caption>...</caption>
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>...</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>

Columns

To modify the column width or content, you can use other components. Here are some useful examples:

Style Description
Column width Add one of the .uk-width-* classes from the Grid component.
Text alignment Add the .uk-text-left, .uk-text-right or .uk-text-center class from the Text component.
Text style Take a look at the Text component. For example add the .uk-text-bold class.

Markup

<td class="uk-width-1-10 uk-text-right">...</td>
<td class="uk-width-9-10 uk-text-bold">...</td>

Vertical modifier

To vertically center table content, just add the .uk-table-middle class to the <tr> or <td> elements.


Modifiers

To display the table in a different style, just add a modifier to the the .uk-table class.

Table hover

Add the .uk-table-hover class to display a hover state on table rows.

Example

Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Markup

<table class="uk-table uk-table-hover">...</table>

Table striped

Add zebra-striping to a table by adding the .uk-table-striped class.

Example

Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Markup

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

Table condensed

Add the .uk-table-condensed class to make table cells more compact.

Example

Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Markup

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

Combine modifiers

The modifiers of the Table component are combinable with each other.

Example

Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Markup

<table class="uk-table uk-table-hover uk-table-striped uk-table-condensed">...</table>

Responsive Table

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> element and add the .uk-overflow-container class. This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself.

Example

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data

Markup

<div class="uk-overflow-container">
    <table>...</table>
</div>

Testimonials

  • Working in Don Bosco Technical school has been an absolute pleasure so far. Being welcomed completely by the community means it only took me two months to call Sihanoukville home. Teaching English to the students here has never once been

    Elena Arellano-Templer
  • The work I have done with Don Bosco, both with teaching and helping with the Children Fund has been all too rewarding

    Maryam Mohamed
  • I am really happy to be here, because I can help poor children who want to study. Although, I cannot help them directly I feel them in my heart. Sometimes the work is hard, but I love it! 

    Pech Chanmey
  • I feel very honored to be part of Don Bosco Children Fund Cambodia. I want to help and encourage the young people of Cambodia to keep studying and to keep going for their dreams.

    Penh Sokkheng
  • Hello! I am Teacher Gary from Brisbane, Australia. I previously taught English in China and Vietnam. Now I’m pleased to be in Cambodia as a volunteer teacher at Don Bosco Sihanoukville since June 2017. It is a pleasure teaching at

    Gary Briggs

Subscribe to our newsletter

Loading
logoDon Bosco Children Fund

It is a special project of the Don Bosco Foundation of Cambodia which was opened in 1992 to outreach and care to children from disadvantage communities and orphans. It grants scholarship to poor children and is supported by international sponsors.

BRANCHES IN CAMBODIA