OBINTUSACADEMY
HOME CONTACT SERVICES PRIVACY
C.B MS-PACKAGES CSS
CSS - Tables

BASIC

Introduction to CSS Getting Started CSS Basic Structure CSS Syntax CSS Selectors CSS Universal Selector CSS Element Selector CSS ID Selector CSS Class Selector CSS Group Selector CSS Descendant Selector CSS Child Selector CSS Adjacent Sibling Selector CSS General Sibling Selector CSS Pseudo Element Selector CSS Pseudo Class Selector CSS Attribute Selector CSS Comments CSS Rule CSS Colors CSS Foreground and Background Color CSS Fonts CSS Background CSS Background Clip CSS Background Origin CSS Background Size CSS Text/Word Formatting CSS Images

INTERMEDIATE

CSS Borders CSS Margin CSS Padding CSS Dimension CSS Outline CSS Lists CSS Tables CSS Links CSS Overflow CSS Cursor CSS Float CSS Clear CSS Box Sizing CSS Display CSS Positioning CSS Z-Indexing CSS Opacity CSS Icons CSS Media Queries

ADVANCE

CSS Multiple Backgrounds CSS Gradient CSS Shadow CSS 2D Transform CSS 3D Transform CSS Transition CSS Animation CSS Image Reflection CSS Masking CSS Navigation Bar CSS Dropdown CSS !important CSS Specificity CSS Math Functions CSS Web Fonts CSS Pagination CSS Multiple Columns CSS Resizing and Offset CSS Variables CSS Conclusion

Tables

PREVIOUS NEXT

In this tutorial, I will be showing you how to style HTML tables using CSS styling properties.

TABLE BORDERS

The table-border property is used to add borders to your HTML tables.

TRY IT OUT YOURSELF

COLLAPSE BORDERS

The collapse-border property is used to collapse table cell borders into a single border.

TRY IT OUT YOURSELF
note
NOTE:

The default value for border-collapse is separate separate which separates each cell borders.


SPACING

The spacing inside the table cells and between the borders of the cells can be adjusted using the padding and border-spacing properties.

TRY IT OUT YOURSELF

WIDTH AND HEIGHT

Table can be set to occupy the entire width. Height of each table tags (th, tr, td) can also be set to you desired value or choice.

TRY IT OUT YOURSELF

TABLE DATA ALIGNMENT

The text-align and vertical-align properties are used to align table data horizontally and vertically depending on the specified value.

TRY IT OUT YOURSELF

TABLE LAYOUT

The table expands and contracts to accommodate its data. The table-layout property is used to set whether the table should adjust its cells, rows and columns (depending on the size of the data) or not. Its values include:

TABLE CAPTION POSITION

The caption-side property is used in CSS to set the positioning of the table caption. Its value includes:

  • top
  • bottom
  • block-start
  • block-end
  • inline-start
  • inline-end
  • inherit
TRY IT OUT YOURSELF

EMPTY CELLS

The empty-cells property is used in CSS to control how cells which has no data are being handled.

  • show - show borders and backgrounds.
  • hide - do not show any borders and backgrounds.
TRY IT OUT YOURSELF

STRIPED TABLES

The nth-child() pseudo class selector is used in CSS to give your table a zebra-strip. You can add a background color to all even or odd table rows.

TRY IT OUT YOURSELF

HOVERABLE TABLE

You can add hover effect to your table row, to highlight it anytime you place your mouse on top each row. This is done using the :hover pseudo class selector.

TRY IT OUT YOURSELF

RESPONSIVE TABLE

The ability of the table to automatically add horizontal and vertical scrollbars if the screen of the device or the size of the container is too small to display the full data. This is done using the overflow-x property in CSS.

TRY IT OUT YOURSELF
tips
TIP:

Other styling that can be applied to HTML elements can also be applied to table such as: font-family, font-weight, letter-spacing, color and many more.

PREVIOUS NEXT
ADVERTISEMENTS

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT