Tables in CSS with Examples
Free Web development courses with real-time projects Start Now!!
In this article, we will learn about tables in CSS. Let’s start!!
Tables in CSS
Although designing an Xhtml table is not the most appealing task, we occasionally all must complete it. A stylesheet chart is used to organize data into rows and columns and add style to HTML tables. Tables are frequently used in data analysis, research, and communication. To showcase the structure of the table, use the CSS table-layout attribute. This attribute essentially controls the algorithm used to arrange the units, columns, and rows of a table.
Separating CSS in a .css file enhances accessibility, offers more control over presentation, allows sharing of formatting, and improves page loading speed. This benefits the webpage discussing the file and its typesetting.
The CSS table decorations increase the accessibility of the tabular content and add appeal to the previously plain and unattractive HTML tables. An HTML table can be styled in a variety of ways. The table borders, row-column heights and widths, font colors, and many more movements like hover effects are some of them.
HTML tables can be styled for a better visual and tactile experience. The following CSS attributes are frequently used while creating tables:
- Background-color
- Border
- Padding
- Color
- Border-collapse
- Height
- Width
- Text-align
CSS Table Border:
It is utilized to define table borders
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: left;
}
h1 {
color: rgb(255, 0, 242);
}
table,
th,
td {
/* Styling the border. */
border: 4.0px solid brown;
}
</style>
</head>
<body>
<h1>DataFlair</h1>
<h2>Table with added Border:</h2>
<table>
<tr>
<th>Column-01</th>
<th>Column-02</th>
</tr>
<tr>
<td>1</td>
<td>Data-01</td>
</tr>
<tr>
<td>2</td>
<td>Data-02</td>
</tr>
</table>
</body>
</html>Output:
IMAGE
CSS Table Padding:
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 3px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<h1>DataFlair</h1>
<table>
<tr><th>Employee</th><th>Department</th><th>Salary</th></tr>
<tr><td>Shikha</td><td>Sharma</td><td>50,000</td></tr>
<tr><td>Atharva</td><td>Jain</td><td>80,000</td></tr>
<tr><td>Ketaki</td><td>Singh</td><td>23,000</td></tr>
<tr><td>Piyush</td><td>Joshi</td><td>54,000</td></tr>
</table>
</body>
</html>Output:
Technology is evolving rapidly!
Stay updated with DataFlair on WhatsApp!!
CSS Vacant sections:
This feature determines whether or not blank cells in a table should have borders and backgrounds.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: left;
}
h1 {
color: rgb(255, 0, 242);
}
table.one {
border-collapse: separate;
border-spacing: 10px;
/* Hiding empty cells border */
empty-cells: hide;
}
table.two {
border-collapse: separate;
border-spacing: 10px;
/* Display empty cells border */
empty-cells: show;
}
table,
td,
th {
border: 4px solid brown;
}
</style>
</head>
<body>
<h1>DataFlair</h1>
<h2>Hiding Empty Cells:</h2>
<table class="one">
<tr>
<th>Column-01</th>
<th>Column-02</th>
</tr>
<tr>
<td>One</td>
<td></td>
</tr>
<tr>
<td>Two</td>
<td>John James</td>
</tr>
</table>
<br>
<br>
<h2>Displaying Empty Cells:</h2>
<table class="two">
<tr>
<th>Column-01</th>
<th>Column-02</th>
</tr>
<tr>
<td>1</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>John james</td>
</tr>
</table>
</body>
</html>Output:
Border Collapse in a CSS Table
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h1> DataFlair </h1>
<table>
<tr><th>Employee</th><th>Department</th><th>Salary</th></tr>
<tr><td>Prithvi Sharma</td><td>HR</td><td>70,000</td></tr>
<tr><td>Shital John</td><td>Software</td><td>30,000</td></tr>
<tr><td>Arun Nair</td><td>Accounts</td><td>46,000</td></tr>
<tr><td>Anshika Kadam</td><td>HR</td><td>80,000</td></tr>
</table>
</body>
</html>Output:
CSS Table Layout
The database layout attribute is used to configure the table’s layout algorithm.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: left;
}
h1 {
color: rgb(255, 0, 242);
}
table.one {
width: 80px border-collapse: separate;
border-spacing: 10px;
table-layout: auto;
}
table.two {
width: 80px border-collapse: separate;
/* For full width add (width: 100%)*/
border-spacing: 10px;
/* Layout fixed. */
table-layout: fixed;
}
table,
td,
th {
border: 3.5px solid brown;
width: 80px;
}
</style>
</head>
<body>
<h1>DataFlair</h1>
<h2>Auto layout in a table:</h2>
<table class="one">
<tr>
<th>Serial No.</th>
<th>Content</th>
</tr>
<tr>
<td>01</td>
<td>aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrR</td>
</tr>
<tr>
<td>02</td>
<td>sStTuUvVwWxXyYzZ</td>
</tr>
</table>
<br>
<br>
<h2>Fixed layout in a table:</h2>
<table class="two">
<tr>
<th>Serial No.</th>
<th>Content</th>
</tr>
<tr>
<td>01</td>
<td>aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrR</td>
</tr>
<tr>
<td>02</td>
<td>sStTuUvVwWxXyYzZ</td>
</tr>
</table>
</body>
</html>Output:
Style regular and uneven cells in CSS table
For a better appearance and feel, we can style both even and uneven table units. Different background hues are displayed on even and uneven units in this code. In addition, we updated the shade and background color of the< th> tag.
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
table#alter tr:nth-child(even) {
background-color: #eda3e8;
}
table#alter tr:nth-child(odd) {
background-color: #a3eda5;
}
table#alter th {
color: black;
background-color: aqua;
}
</style>
</head>
<body>
<h1>DataFlair</h1>
<table id="alter">
<tr><th>Employee</th><th>Department</th><th>Salary</th></tr>
<tr><td>Prithvi Sharma</td><td>HR</td><td>70,000</td></tr>
<tr><td>Shital John</td><td>Software</td><td>30,000</td></tr>
<tr><td>Arun Nair</td><td>Accounts</td><td>46,000</td></tr>
<tr><td>Anshika Kadam</td><td>HR</td><td>80,000</td></tr>
</table>
</body>
</html>Output:
Types of tables in CSS
In CSS, there are three types of tables:
1. Standard table: This is the default table style in CSS. It has a plain, simple design with rows and columns of data.
2. Grid table: This type of table uses CSS Grid layout to create a more complex layout. Grid tables allow for greater flexibility in terms of column and row sizing and can include both horizontal and vertical alignment of cells.
3. Flexbox table: This type of table uses CSS Flexbox to create a responsive table layout. Flexbox tables allow for the dynamic resizing of cells, which makes them ideal for creating tables that adapt to different screen sizes.
CSS Table Properties
In addition to these three types of tables, there are also several CSS properties you can use to style tables, including:
1. Border: Defines the border around the table and cells.
2. Padding: Defines the space between the cell content and the cell border.
3. Margin: Defines the space between the table and surrounding elements.
4. Background color: Sets the background color of the table.
5. Text-align: Sets the alignment of text within cells.
6. Font size: Sets the size of the text within cells.
Overall, the type of table you choose to use in CSS will depend on your specific design needs and the complexity of the data you need to display. Each type of table offers its own unique benefits and can be customized using CSS properties to create a visually appealing and functional design.
Conclusion:
Since tables have been a common component of web pages for a very long time, many designers continue to utilize them even though new design paradigms emerge. This has been explained by their simplicity of use. Tables are used by more than two-thirds of websites today to organize and lay out the various elements on online pages.
However, due to the numerous benefits associated with cascading style sheets (CSS), some designers are choosing them over tables when it comes to web page layout. Text formatting has historically been done via CSS.
Did you like our efforts? If Yes, please give DataFlair 5 Stars on Google
