Unleash your potential

Go one step further with our solutions for creating an intuitive, personalized experience.

Haltura

Create libraries without coding.

Spartiapp

Create beautiful websites.
Log In
Alpha
Docs Creations Contact

Introduction

IntroductionInstallationBreakpoints

Components

AccordionAlertAutocompleteAvatarBadgeButtonCardCheckboxDividerDropdownFieldLayoutModalNavigationRadioSheetSkeletonSliderSnackbarSpinnerTableTabTooltipTypography

Utilities

ColorDisplayFlexboxOpacityPositionRadiusSizingSpacingTextVertical align

APIs

HalturaCookiesFrontierTour
Docs / web / table

Table

The Table component allows to order and structure different information.

Initializing the component.

The implementation of the Table component is done with the h_table class.

# 1 2
- - -
- - -
table
<table class="h_table">
   <thead>
      <tr>
          <th>#</th>
          <th>1</th>
          <th>2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>-</td>
          <td>-</td>
          <td>-</td>
      </tr>
      <tr>
          <td>-</td>
          <td>-</td>
          <td>-</td>
      </tr>
   </tbody>
</table>

There are 2 other variants of Table: bordered and blank.

# 1 2
- - -
- - -
# 1 2
- - -
- - -
table
<table class="h_table bordered">
   <thead>
      <tr>
          <th>#</th>
          <th>1</th>
          <th>2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>-</td>
          <td>-</td>
          <td>-</td>
      </tr>
      <tr>
          <td>-</td>
          <td>-</td>
          <td>-</td>
      </tr>
   </tbody>
</table>
<table class="h_table blank">
   <thead>
      <tr>
          <th>#</th>
          <th>1</th>
          <th>2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>-</td>
          <td>-</td>
          <td>-</td>
      </tr>
      <tr>
          <td>-</td>
          <td>-</td>
          <td>-</td>
      </tr>
   </tbody>
</table>

The Table component is stretched over the whole length. It is possible to create a horizontal scroll to have a better readability with the class h_table-scroll--[X] (X represents the breakpoints).

In the following example, if its content allows it, the Table component will be scrollable beyond the breakpoint t (tablet).

table
<div class="h_table-scroll--t">
   <table class="h_table">...</table>
</div>
# 1 2
- - -
- - -
# 1 2
- - -
- - -
table
<table class="h_table bordered">
   <thead>
      <tr>
          <th>#</th>
          <th>1</th>
          <th>2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>-</td>
          <td>-</td>
          <td>-</td>
      </tr>
      <tr>
          <td>-</td>
          <td>-</td>
          <td>-</td>
      </tr>
   </tbody>
</table>
<table class="h_table blank">
   <thead>
      <tr>
          <th>#</th>
          <th>1</th>
          <th>2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>-</td>
          <td>-</td>
          <td>-</td>
      </tr>
      <tr>
          <td>-</td>
          <td>-</td>
          <td>-</td>
      </tr>
   </tbody>
</table>
Class Definition
h_table Create a component.
blank Create a component.
bordered Create a component.
h_table-scroll--[X] Add horizontal scroll at the breakpoint [X].
Hello!

Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!

Cookie settings

Important (Can't be disabled)