CSS Table

The CSS table properties are used to style and control the layout of HTML tables. This includes setting borders, spacing, alignment, and appearance of rows, columns, and cells. With CSS, you can create visually appealing and responsive tables for your webpage.

• border
• border-collapse
• padding
• width
• height
• text-align
• color
• background-color

Key Points on CSS Tables:

• CSS provides a variety of properties to style table elements such as table, tr, th, and td.
• Properties like border-collapse, border-spacing, and empty-cells allow for advanced table customization.
• Table width and height can be adjusted using width and height properties.
• Cell alignment can be controlled using text-align and vertical-align.
• CSS tables can be made responsive by using media queries and applying scrolling or wrapping techniques.

Syntax for CSS Table:

/* Basic table styling */
        table {
            border-collapse: collapse;
            width: 100%;
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        
        th {
            background-color: #f2f2f2;
            text-align: left;
        }

Examples of CSS Tables:

table {
            border-collapse: collapse;
            width: 100%;
            margin: 10px 0;
        }
        
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
        
        th {
            background-color: lightblue;
        }

table {
            border-collapse: collapse;
            width: 100%;
        }
        
        th, td {
            border: 1px solid black;
            padding: 10px;
        }
        
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        
        th {
            background-color: lightblue;
            font-weight: bold;
        }

Common Table Properties:

• border-collapse: Specifies whether table borders should collapse into a single border or remain separated.
• border-spacing: Sets the spacing between table cells when borders are not collapsed.
• text-align: Specifies horizontal alignment of content in table cells.
• vertical-align: Specifies vertical alignment of content in table cells.
• padding: Sets the space between the content and the cell border.
• background-color: Applies background color to table headers, rows, or cells.

CSS tables are a powerful tool for organizing and displaying tabular data in a structured and visually appealing format. Customize table properties to fit the design and functional requirements of your webpage.