Creating rows and columns in W3.CSS table.
Creating W3.CSS table in an existing HTML website webpage, where w3-row and w3-col classes are used to create a complete responsive table layout. Where W3.CSS row and column classes help to create a table structure in row and column order of your webpage content. With which you can create the table grid layout you need.
So let’s use w3-row and w3-col classes in W3.CSS grid-based table layout.
W3.CSS w3-row class.
In an HTML website webpage, w3-row class is used to create a row container to create multiple columns. It is previewed as a core for a column in the table. Where you can create a complete table structure by using w3-col class together.
w3-row class basic use in W3.CSS.
<div class=”w3-row”>
<!—You can write column content from here –>
</div>
W3.CSS w3-col class.
In any HTML website webpage, w3-col class is used to create columns within a row in a table. Table columns are individual block elements of your table layout, and they can be created based on the total width of the row as per your table requirement.
w3-col class basic use in W3.CSS.
<div class=”w3-row”>
<div class=”w3-col w3-quarter”>Column 1 element (3/12)</div>
<div class=”w3-col w3-quarter”>Column 2 element (3/12)</div>
<div class=”w3-col w3-quarter”>Column 3 element (3/12)</div>
<div class=”w3-col w3-quarter”>Column 4 element (3/12)</div>
</div>
Here you can define the width of each column as a number between 1 to 12 columns. The total number of columns in a row should be 12 to fill the entire width.
Here in this example.
- w3-quarter is an abbreviation of w3-col, which means the width is 3/12 (or 25% of the total width of the row).
- Where each column takes up 1/4 of the row. This makes it a 4-column table layout structure.
W3.CSS Responsive Columns.
In any HTML website webpage, W3.css provides a responsive table structure by default, which means the table layout automatically adapts according to the screen size. You can also manually define the width of the table columns for different screen sizes using additional table classes like w3-tiny, w3-small, w3-medium, w3-large and w3-xlarge in the responsive table layout.
So let us now understand an example of creating a responsive table layout with different column widths for different screen sizes.
<div class=”w3-row”>
<div class=”w3-col s12 m6 l4″>
<!—here it will take 100% width on small screens, 50% on medium, and 33% on large column screens –>
Column 1 element
</div>
<div class=”w3-col s12 m6 l4″>
Column 2 element
</div>
<div class=”w3-col s12 m6 l4″>
Column 3 element
</div>
</div>
Here in this example.
- s12 – Here the column in the existing table will take up 100% (12/12) of the row on small screens (screen width less than 600px).
- m6 – The column will take up 50% (6/12) of the row on medium screens (screen width between 600px and 900px).
- l4 – The column will take up 33.33% (4/12) of the row on large screens (screen width greater than 900px).
Offsetting W3.CSS columns.
You can preview your W3.CSS table columns in offset order to create space between them. The table offset option is useful when you want to move a table column to the right, or display it in the middle of the available table space.
Where you want to create offset table structures in your tables, you must use the w3-offset-{n} class, where {n} is the number of columns you want to offset in the existing table order.
For example, if you want to offset a column by 4 columns, use the class w3-offset-4.
<div class=”w3-row”>
<div class=”w3-col s12 m6 l4 w3-offset-4″>Preview Centered Column</div>
</div>
W3.CSS multi-column layout example.
Here is a responsive table example that shows how to use w3-row and w3-col to create a multi-column table structure layout with responsive layout.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Example of w3.css Responsive Columns </title>
</head>
<body>
<!– example of w3.css Row with 1 column –>
<h2><center>Let Tray Responsive Column Layout Example</center></h2>
<div class=”w3-row”>
<div class=”w3-col s12 m12 l12″>
<div class=”w3-card w3-padding w3-margin”><center>Preview of single column</center></div>
</div>
</div>
<!– example of w3.css Row with 2 columns –>
<div class=”w3-row”>
<div class=”w3-col s12 m6 l6″>
<div class=”w3-card w3-padding w3-margin”><center>Column 1 Element</center></div>
</div>
<div class=”w3-col s12 m6 l6″>
<div class=”w3-card w3-padding w3-margin”><center>Column 2 Element</center></div>
</div>
<div class=”w3-container”>
<!– example of w3.css Row with 4 columns –>
<div class=”w3-row”>
<div class=”w3-col s12 m4 l3″>
<div class=”w3-card w3-padding w3-margin”><center>Column 1 Element</center></div>
</div>
<div class=”w3-col s12 m4 l3″>
<div class=”w3-card w3-padding w3-margin”><center>Column 2 Element</center></div>
</div>
<div class=”w3-col s12 m4 l3″>
<div class=”w3-card w3-padding w3-margin”><center>Column 3 Element</center> </div>
</div>
<div class=”w3-col s12 m4 l3″>
<div class=”w3-card w3-padding w3-margin”><center>Column 4 Element</center> </div>
</div>
</div>
</div>
</div>
</body>
</html>
W3.CSS Key Points.
- w3-row – This defines the row that holds the columns in W3.CSS.
- w3-col – This W3.CSS class defines the column inside the row. Here you can define the width of individual columns using classes like w3-col s12, w3-col m6, w3-col l4, etc.
- W3.CSS Responsiveness – This previews the column structure in your existing W3.CSS in responsive by default, where you can preview the table structure with s12, m6, l4, etc. for different device screen sizes.
- W3.CSS Offset – Here you can use the w3-offset-{n} class to move the table column by a certain number of grid units.
W3.CSS Table Row Column Additional Layout Features.
W3.CSS also provides some additional layout classes that can be useful when working with rows and columns:
- .w3-center – This holds the table content in the center position inside a W3.CSS table column.
- .w3-left – This holds the table content in the left direction inside a W3.CSS table column.
- .w3-right – This aligns the table content in the right direction inside a W3.CSS table column.
- .w3-padding – This displays the padding in the table content inside a W3.CSS table column.
- .w3-margin – This displays the margin on all sides of the table element inside a W3.CSS table column.
W3.CSS Table Row Column Example.
<div class=”w3-row”>
<div class=”w3-col s12 m4 l3 w3-center”>
<div class=”w3-card w3-padding”>You see Centered Column element </div>
</div>
<div class=”w3-col s12 m4 l3 w3-left”>
<div class=”w3-card w3-padding”> You see Left-Aligned Column element </div>
</div>
<div class=”w3-col s12 m4 l3 w3-right”>
<div class=”w3-card w3-padding”> You see Right-Aligned Column element </div>
</div>
</div>
Here in this example.
- This aligns the first column in the active table in the center direction (w3-center).
- This aligns the second column in the active table in the left direction (w3-left).
- This aligns the third column in the active table in the right direction (w3-right).
