Border Collapse
You have the flexibility to manage the space between table borders by manipulating the ‘border-collapse’ property. This property determines how adjacent table cell borders interact, and adjusting it allows you to control the spacing or gap between the borders within your table.
By setting ‘border-collapse’ to “collapse”, borders will merge, eliminating any spacing, while “separate” allows you to control the spacing using the ‘border-spacing’ property, providing a more customized appearance to your table layout.
Example
<!DOCTYPE html><html><head><style>
#table1 {
border-collapse: separate;
}
#table2 {
border-collapse: collapse;
}
</style></head><body><table id="table1" border="1"><tr><th>Name</th><th>Salary</th></tr><tr><td>Ramesh Raman</td><td>5000</td></tr><tr><td>Shabbir Hussein</td><td>7000</td></tr></table><br /><table id="table2" border="1"><tr><th>Name</th><th>Salary</th></tr><tr><td>Ramesh Raman</td><td>5000</td></tr><tr><td>Shabbir Hussein</td><td>7000</td></tr></table></body></html>Zebra Stripes – Horizontal
The Zebra Stripes – Horizontal technique involves styling table rows with alternating colors, enhancing the visual appeal and readability of the table.
The :nth-child(even) selector targets every second row, and a background color is applied to create a striped effect.
Example
<!DOCTYPE html><html><head><style>
tr:nth-child(even) {
background-color: #8a83de;
}
</style></head><body><table border="1"><table border="1"><tr><th>Name</th><th>Salary</th></tr><tr><td>Ramesh Raman</td><td>5000</td></tr><tr><td>Shabbir Hussein</td><td>7000</td></tr></table></table></body></html>Text Alignment
You can align the text within your table cells horizontally and vertically using the text-align and vertical-align properties.
Example
<!DOCTYPE html><html><head><style>
td,
th {
text-align: center;
vertical-align: middle;
}
</style></head><body><table border="1"><tr><th>Name</th><th>Salary</th></tr><tr><td>Ramesh Raman</td><td>5000</td></tr><tr><td>Shabbir Hussein</td><td>7000</td></tr></table></body></html>Zebra Stripes – Vertical
The Zebra Stripes – Vertical technique enhances table readability by applying alternating styles to every other column. This is achieved using the :nth-child(even) selector for both table data (td) and table header (th) elements.
Example
<!DOCTYPE html><html><head><style>
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
</style></head><body><table border="1"><tr><th>Name</th><th>Salary</th></tr><tr><td>Ramesh Raman</td><td>5000</td></tr><tr><td>Shabbir Hussein</td><td>7000</td></tr></table></body></html>Combine Vertical and Horizontal Zebra Stripes
You can achieve a captivating visual effect by combining both horizontal and vertical zebra stripe patterns in your table. This involves applying alternating styles to both rows (:nth-child(even)) and columns (td:nth-child(even), th:nth-child(even)).
To enhance this effect, consider adjusting the color transparency using the rgba() function, creating an engaging and aesthetically pleasing overlap of stripes for a unique and visually interesting outcome.
Example
<!DOCTYPE html><html><head><style>
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),
td:nth-child(even) {
background-color: rgba(212, 150, 192, 0.4);
}
</style></head><body><table border="1"><tr><th>Name</th><th>Salary</th></tr><tr><td>Ramesh Raman</td><td>5000</td></tr><tr><td>Shabbir Hussein</td><td>7000</td></tr></table></body></html>Horizontal Dividers
You can enhance the visual structure of your table by incorporating horizontal dividers. Achieve this effect by styling each ‘<tr>’ element with a bottom border.
This CSS customization provides a clear separation between rows, contributing to improved table clarity and a more organized presentation of tabular data.
Example
<!DOCTYPE html><html><head><style>
table {
border-collapse: collapse;
}
tr {
border-bottom: 5px solid #ddd;
}
th,
td {
padding: 10px;
/* Add padding for better visibility */
}
</style></head><body><table border="1"><tr><th>Name</th><th>Salary</th></tr><tr><td>Ramesh Raman</td><td>5000</td></tr><tr><td>Shabbir Hussein</td><td>7000</td></tr></table></body></html>The above HTML program defines a simple table with two rows and two columns. CSS styles are applied to create a visual separation between rows using a solid border at the bottom of each row. The border-collapse property ensures a cleaner layout, and padding is added for improved visibility of table cells.
Hoverable Table Rows
You can improve user interaction by employing the ‘:hover’ selector, which highlights table rows when users hover over them. This enhances the visual feedback, making the table more interactive and user-friendly.
Example
<!DOCTYPE html><html><head><style>
tr:hover {
background-color: #D6EEEE;
}
</style></head><body><table border="1"><tr><th>Name</th><th>Salary</th></tr><tr><td>Ramesh Raman</td><td>5000</td></tr><tr><td>Shabbir Hussein</td><td>7000</td></tr></table></body></html>The above HTML program creates a table with a border. The CSS style makes the rows change the background color to light blue when hovered over, enhancing user interaction.
Leave a Reply