CSS Table Layout

« Previous Tutorial Next Tutorial »

The table-layout property specifies the way in which a table should be displayed in a Web browser.

In CSS, the table-layout property allows flexibility in positioning the tables, which means that you can easily move and place tables at different locations throughout the Web page.

Using the table-layout property also decreases the loading time of the table, allowing the main content to appear before the graphics.

CSS table-layout Property Values

The following table describes the possible values of the table-layout property :

Value Description
auto Refers to the layout in which a Web browser automatically resizes a table according to its content. This is the default value of the table-layout property. In auto layout, the Web browser reads all the content of a table before determining the final layout and set the column width according to the width occupied by the content in the cells.
fixed Refers to the layout in which a Web browser does not resizes a table according to the width occupied by its content. In the fixed layout, a Web browser reads only the first row of a table to determine the final layout of the table.

CSS table-layout Syntax

The following syntax shows an example of specifying the table-layout property in a table:

table { table-layout: auto; }

In the preceding syntax, the value of the table-layout property has been set to auto. This implies that table cells would automatically be resized according to the amount of content placed in them.

CSS Online Test

« Previous Tutorial Next Tutorial »

© Copyright 2021. All Rights Reserved.