Bootstrap 3 Tutorial

CSS Tables

Last modified on: October 28, 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">&nbsp;</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="ee081d03-0983-4f24-9bdf-a65de0a115dc" 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">
<h3>CSS Tables</h3>
<p>Tables are a fundamental way to display data in a structured format on web pages. While HTML provides basic table elements, CSS enhances their presentation, allowing for styling that improves readability and visual appeal. Below is a detailed guide on how to create and style tables using CSS.</p>
<h4>1. Basic HTML Table Structure</h4>
<p>A basic HTML table is created using the <code>&lt;table&gt;</code>, <code>&lt;tr&gt;</code>, <code>&lt;th&gt;</code>, and <code>&lt;td&gt;</code> elements. Here's an example of a simple table:</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">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;Country&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;USA&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;UK&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Maria Garcia&lt;/td&gt;
            &lt;td&gt;28&lt;/td&gt;
            &lt;td&gt;Spain&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>2. Basic CSS Styling for Tables</h4>
<p>You can apply CSS to enhance the appearance of tables. Here&rsquo;s a simple example to style the table:</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 {
    width: 100%; /* Full width */
    border-collapse: collapse; /* Remove spacing between cells */
    margin: 20px 0; /* Margin around the table */
}

th, td {
    padding: 12px; /* Cell padding */
    text-align: left; /* Align text to the left */
    border: 1px solid #dddddd; /* Light grey border */
}

th {
    background-color: #f2f2f2; /* Light grey background for headers */
}
</code></pre>
</div>
</div>
</div>
</div>
<h4>3. Hover Effects</h4>
<p>Adding hover effects can improve the user experience by highlighting rows when users mouse over them. Here&rsquo;s how you can implement that:</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>tbody tr:hover {
    background-color: #f5f5f5; /* Change background color on hover */
}
</code></pre>
</div>
</div>
</div>
</div>
<h4>4. Zebra Striping</h4>
<p>Zebra striping alternates the background color of table rows 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>tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* Light grey for odd rows */
}

tbody tr:nth-child(even) {
    background-color: #ffffff; /* White for even rows */
}
</code></pre>
</div>
</div>
</div>
</div>
<h4>5. Responsive Tables</h4>
<p>To make tables responsive, you can use CSS media queries or a simple overflow mechanism. Here&rsquo;s an example of how to create a scrollable table:</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-container {
    overflow-x: auto; /* Add horizontal scroll */
}

table {
    min-width: 600px; /* Set a minimum width */
}
</code></pre>
</div>
</div>
</div>
</div>
<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;div class="table-container"&gt;
    &lt;table&gt;
        &lt;!-- Table content --&gt;
    &lt;/table&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>6. Styling Table Headers and Footers</h4>
<p>You can also style the <code>&lt;thead&gt;</code> and <code>&lt;tfoot&gt;</code> elements to distinguish them from the table body:</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>thead {
    background-color: #007bff; /* Blue header background */
    color: white; /* White text */
}

tfoot {
    background-color: #f2f2f2; /* Light grey footer */
    font-weight: bold; /* Bold text */
}
</code></pre>
</div>
</div>
</div>
</div>
<h4>7. Example of a Complete Table</h4>
<p>Here&rsquo;s a complete example of a styled table:</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">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;Styled Table&lt;/title&gt;
    &lt;style&gt;
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

th, td {
            padding: 12px;
            text-align: left;
            border: 1px solid #dddddd;
        }

th {
            background-color: #007bff;
            color: white;
        }

tbody tr:hover {
            background-color: #f5f5f5;
        }

tbody tr:nth-child(odd) {
            background-color: #f9f9f9;
        }

tbody tr:nth-child(even) {
            background-color: #ffffff;
        }

.table-container {
            overflow-x: auto;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="table-container"&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;Country&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;USA&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;UK&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Maria Garcia&lt;/td&gt;
                &lt;td&gt;28&lt;/td&gt;
                &lt;td&gt;Spain&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
        &lt;tfoot&gt;
            &lt;tr&gt;
                &lt;td colspan="2"&gt;Total&lt;/td&gt;
                &lt;td&gt;3&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tfoot&gt;
    &lt;/table&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>8. Conclusion</h4>
<p>Styling tables with CSS enhances their appearance and makes data more accessible and understandable. By applying basic styles, hover effects, responsive design, and zebra striping, you can create visually appealing tables that improve user experience. Remember to consider accessibility standards by ensuring proper contrast and readability in your table designs.</p>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More