CSS or Cascading Style Sheets is a language used to describe the presentation of a document written in HTML or XML. It is used to style web pages and make them look visually appealing. One of the important properties of CSS is the table-layout property. In this article, we will discuss the table-layout property in CSS and its usage.
The table-layout property in CSS is used to control the layout algorithm used for a table. It specifies how a table should be laid out, either fixed or automatic. The table-layout property is used to optimize the rendering of large tables. It is used to control the way the table is displayed on the screen, and how the columns and rows are sized.
The table-layout property has two possible values:
Let's take a look at some examples of how the table-layout property works.
In this example, we will use the auto value for the table-layout property. This means that the table will adjust its width and column widths based on the content of the cells.
<table style="table-layout: auto;">
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Female</td>
</tr>
</table>
The output of the above code will be:
| Name | Age | Gender |
|---|---|---|
| John | 25 | Male |
| Jane | 30 | Female |
In this example, we will use the fixed value for the table-layout property. This means that the table will have a fixed width and column widths will be set according to the width of the columns in the first row of the table.
<table style="table-layout: fixed; width: 100%;">
<tr>
<th style="width: 30%;">Name</th>
<th style="width: 20%;">Age</th>
<th style="width: 50%;">Gender</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Female</td>
</tr>
</table>
The output of the above code will be:
| Name | Age | Gender |
|---|---|---|
| John | 25 | Male |
| Jane | 30 | Female |
The table-layout property in CSS is used to control the layout algorithm used for a table. It specifies how a table should be laid out, either fixed or automatic. The table-layout property is used to optimize the rendering of large tables. It is used to control the way the table is displayed on the screen, and how the columns and rows are sized.