Lists and tables
Lists and tables are two common ways to show data: a list of skills in a portfolio, a table of projects with years and technologies. Pico gives them spacing, lines and alignment; all you supply is the right markup.
Lists
A bulleted <ul> and a numbered <ol> get neat spacing, and nested lists shift to the right:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<h3>What I do</h3>
<ul>
<li>Landing page layout</li>
<li>
CMS websites
<ul>
<li>WordPress</li>
<li>Static site generators</li>
</ul>
</li>
</ul>
<h3>How I work</h3>
<ol>
<li>We discuss the task</li>
<li>I show a prototype</li>
<li>I deliver the finished site</li>
</ol>The preview shows a bulleted list with a nested sublist and numbered steps below it. Inside <nav> Pico shows the same tags without bullets, in a row — that comes in the navigation lesson.
A table
A table only needs the right structure: <thead> for the header and <tbody> for the rows. Pico draws horizontal lines between rows and highlights the header:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<table>
<thead>
<tr>
<th scope="col">Project</th>
<th scope="col">Year</th>
<th scope="col">Technologies</th>
</tr>
</thead>
<tbody>
<tr><td>Coffee shop website</td><td>2024</td><td>HTML, Pico</td></tr>
<tr><td>Photographer portfolio</td><td>2025</td><td>Astro</td></tr>
<tr><td>Course landing page</td><td>2025</td><td>HTML, Sass</td></tr>
</tbody>
</table>The table spans the full width, the header is bold and rows are separated by thin lines.
Stripes and scrolling
| What you need | How |
|---|---|
| Alternating row stripes | class="striped" on <table> |
| Scrolling a wide table | Wrap it in <div class="overflow-auto"> |
| A totals row | The <tfoot> tag |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<div class="overflow-auto">
<table class="striped">
<thead>
<tr><th scope="col">Month</th><th scope="col">Posts</th><th scope="col">Views</th></tr>
</thead>
<tbody>
<tr><td>January</td><td>4</td><td>1200</td></tr>
<tr><td>February</td><td>3</td><td>980</td></tr>
<tr><td>March</td><td>5</td><td>1640</td></tr>
</tbody>
<tfoot>
<tr><th scope="row">Total</th><td>12</td><td>3820</td></tr>
</tfoot>
</table>
</div>Odd rows got a grey background and the total at the bottom stands out. On a narrow screen the table scrolls inside its own block instead of breaking the page width.
Common mistake
Building a table without <thead> and <tbody>, putting every <tr> straight into <table>. The browser adds <tbody> itself, but there is no header: the row with column names becomes an ordinary row, and the striped class paints it too. Always separate the header with <thead>.