CSS Tutorial

CSS 3 Tables

Last modified on: October 20, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<h2 class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">CSS Tables: Styling HTML Tables for Enhanced Presentation</h2>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="85686011-22c6-40de-85d6-7060149e8ac2" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>Tables are essential for displaying data in a structured format on web pages. CSS (Cascading Style Sheets) enables you to enhance the appearance of HTML tables, making them more visually appealing and easier to read.</p>
<hr />
<h3>Basic HTML Table Structure</h3>
<p>A standard HTML table is created using the following elements:</p>
<ul>
<li><strong><code>&lt;table&gt;</code></strong>: The main container for the table.</li>
<li><strong><code>&lt;tr&gt;</code></strong>: Table row, used to group a set of table cells.</li>
<li><strong><code>&lt;th&gt;</code></strong>: Table header cell, typically displayed in bold and centered.</li>
<li><strong><code>&lt;td&gt;</code></strong>: Table data cell, used for standard content.</li>
</ul>
<h4>Example of a Basic HTML Table</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;table&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Age&lt;/th&gt;
            &lt;th&gt;City&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;John Doe&lt;/td&gt;
            &lt;td&gt;30&lt;/td&gt;
            &lt;td&gt;New York&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Jane Smith&lt;/td&gt;
            &lt;td&gt;25&lt;/td&gt;
            &lt;td&gt;Los Angeles&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Sam Green&lt;/td&gt;
            &lt;td&gt;35&lt;/td&gt;
            &lt;td&gt;Chicago&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Styling Tables with CSS</h3>
<p>CSS provides a wide range of properties to style tables effectively. Here are some common properties:</p>
<ol>
<li><strong><code>border</code></strong>: Defines the border of the table and its cells.</li>
<li><strong><code>padding</code></strong>: Adds space inside the cells.</li>
<li><strong><code>text-align</code></strong>: Aligns text within cells (left, center, right).</li>
<li><strong><code>background-color</code></strong>: Sets the background color of the table or cells.</li>
<li><strong><code>width</code></strong>: Controls the table's width.</li>
</ol>
<hr />
<h3>Example of Basic Table Styling</h3>
<h4>CSS Styling Example</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>table {
    width: 100%; /* Full width */
    border-collapse: collapse; /* Merge borders */
}

th, td {
    border: 1px solid #ddd; /* Cell border */
    padding: 8px; /* Cell padding */
    text-align: left; /* Align text to the left */
}

th {
    background-color: #f2f2f2; /* Header background color */
    color: #333; /* Header text color */
}

tr:hover {
    background-color: #f5f5f5; /* Row hover effect */
}
</code></pre>
</div>
</div>
</div>
</div>
<h4>Complete Example with HTML and CSS</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;CSS Tables Example&lt;/title&gt;
    &lt;style&gt;
        table {
            width: 100%; /* Full width */
            border-collapse: collapse; /* Merge borders */
        }

th, td {
            border: 1px solid #ddd; /* Cell border */
            padding: 8px; /* Cell padding */
            text-align: left; /* Align text to the left */
        }

th {
            background-color: #f2f2f2; /* Header background color */
            color: #333; /* Header text color */
        }

tr:hover {
            background-color: #f5f5f5; /* Row hover effect */
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Employee Information&lt;/h1&gt;
    &lt;table&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Age&lt;/th&gt;
                &lt;th&gt;City&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;John Doe&lt;/td&gt;
                &lt;td&gt;30&lt;/td&gt;
                &lt;td&gt;New York&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Jane Smith&lt;/td&gt;
                &lt;td&gt;25&lt;/td&gt;
                &lt;td&gt;Los Angeles&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Sam Green&lt;/td&gt;
                &lt;td&gt;35&lt;/td&gt;
                &lt;td&gt;Chicago&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example:</p>
<ul>
<li>The table has a full width, with borders collapsed to avoid double borders.</li>
<li>Cells have padding for better readability, and a hover effect highlights rows for easier navigation.</li>
</ul>
<hr />
<h3>Advanced Table Styling</h3>
<p>You can further enhance tables using additional CSS techniques:</p>
<h4>1. <strong>Striped Rows</strong></h4>
<p>Add alternating row colors for better readability.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>tr:nth-child(even) {
    background-color: #f9f9f9; /* Light gray for even rows */
}
</code></pre>
</div>
</div>
</div>
</div>
<h4>2. <strong>Fixed Header</strong></h4>
<p>Keep the header fixed while scrolling.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>table {
    display: block;
    overflow: auto;
    max-height: 300px; /* Set a maximum height */
}

thead {
    display: block; /* Make the header block for scrolling */
}
tbody {
    display: block; /* Allow scrolling of body */
    overflow-y: auto; /* Scroll for body */
    max-height: 300px; /* Set a maximum height */
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Responsive Tables</h3>
<p>To make tables responsive, you can use media queries to adjust the table layout for smaller screens.</p>
<h4>Example of Responsive Table</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>@media screen and (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block; /* Make table elements block elements */
    }
    
    tr {
        margin-bottom: 15px; /* Space between rows */
    }
    
    th, td {
        text-align: right; /* Align text to the right */
        position: relative; /* Relative positioning */
        padding-left: 50%; /* Add left padding for labels */
    }
    
    th::before, td::before {
        position: absolute; /* Absolute positioning for labels */
        left: 0;
        width: 50%; /* Label width */
        padding-left: 10px; /* Padding for labels */
        white-space: nowrap; /* Prevent wrapping */
    }
    
    th:nth-of-type(1)::before { content: "Name"; }
    th:nth-of-type(2)::before { content: "Age"; }
    th:nth-of-type(3)::before { content: "City"; }
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Conclusion</h3>
<p>CSS allows for significant enhancements to the appearance and functionality of tables, making them more user-friendly and visually appealing. By mastering various styling techniques, you can create tables that present data clearly and effectively.</p>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More