Working with Lists and Tables

Intro to Lists and Tables

Build a Blog Site: This is the seventh part of the Build a Blog Site tutorial series.
The focus of this tutorial is on Lists and Tables.

Simulate Bootstrap: In this tutorial series we are mimicking Bootstrap classes, using the same Bootstrap class names, and applying the same or similar style but with less complex style rules.

Finished Code: The code is available on GitHub: github.com/LearnByCheating/learn-html-blog-site-example. There is a separate version with the finished code for each tutorial.

Live Server: If you are using VS Code as your text editor and have the Live Server extension installed, you can launch a local web server from the Editor.

Close any prior Live Server sessions by right-clicking in the editor, then select Stop Live Server.
If you are using the code from the GitHub link above, go to the .vscode/settings.json file and change the liveServer.settings.root value to the appropriate version: "liveServer.settings.root": "/v7-lists-tables"
Right click in the html page and select "Open with Live Server".

Some of the code examples covered below are already in the v7-lists-tables articles/article-template.html page.

CheatSheet: Part of the objective of this tutorial series is to become familiar with the CheatSheet so you can use it for quick reference. As such, it is recommended that you refer to the CheatSheet as you go along.

Lists

There are specific HTML elements for three types of lists.

Unordered Lists

Unordered lists are bullet point lists.
Put the list in ul tags, and put each list item in li tags.

<ul>
 <li>List item 1</li>
 <li>List item 2</li>
</ul>

It will look like this:

List item 1
List item 2

Ordered Lists

Ordered lists are numbered lists.
Wrap them in ol tags, and put each item in li tags

<ol>
 <li>List item 1</li>
 <li>List item 2</li>
</ol>

It will look like this:

List item 1
List item 2

Description list

Less commonly used is a description list.
This is used for a list of terms and their definitions or descriptions.
Wrap the list in dl tags, then wrap each term in a dt tag, and its description in a dd tag.

<dl>
  <dt>Term 1</dt>
  <dd>Definition for term 1.</dd>
  <dt>Term 2</dt>
  <dd>Definition for term 2.</dd>
</dl>

Without any additional styling, it will look like this:

Term 1

Definition for term 1.

Term 2

Definition for term 2.

Bootstrap list styling

Bootstrap has classes for list styling. Instead of bullet points, Bootstrap puts borders around each list item.

We won't mimic the Bootstrap styling for lists, but if you want to see what they look like, go to their documentation page.
Bootstrap documentation on list styling is at: getbootstrap.com/docs > click Utilities: List Group.

The Bootstrap classes for unordered lists are:

<ul class="list-group">
  <li class="list-group-item">List item 1</li>
  <li class="list-group-item">List item 2</li>
</ul>

The Bootstrap classes for ordered lists are:

<ol class="list-group list-group-numbered">
  <li class="list-group-item">List item 1</li>
  <li class="list-group-item">List item 2</li>
</ol>

Lists in Navigation elements

Unordered lists are used in navigation elements. In our blog site we will use unordered lists for:

The links in our navigation bar.
The links in our footer.
The links in the article-template Table of Contents sidebar.

We will add the list tags now but we won't complete the navigation styling until we get to the tutorial on Links and Navbars.

Add lists and classes to the nav and footer lists

In both the index.html and articles-template.html pages, for the nav and footer elements:

Add ul tags with the navbar-nav class.
And li tags with the nav-item class.

<nav class="text-white bg-dark mb-4">
  <div class="container">Navigation Bar Here
    <ul class="navbar-nav">
      <li class="nav-item">SiteLink</li>
    </ul>
  </div>
</nav>
...
<footer class="bg-light mt-3 py-4 border-top">
  <div class="container">Footer Here
    <ul class="navbar-nav">
      <li class="nav-item">YourDomain.com © 202X</li>
      <li class="nav-item">Github</li>
      <li class="nav-item">Twitter</li>
      <li class="nav-item">LinkedIn</li>
      <li class="nav-item">Facebook</li>
    </ul>
  </div>
</footer>

The Table of Contents sidebar in the article-template file is already an unordered list.
Unlike the navbar and footer, we won't be putting the list items on the same line, so we won't add the navbar-nav and nav-item classes to it.

articles/article-template.html

<nav class="col-md-3">
  <div class="bg-light p-4 mb-3 border rounded">
    <h5>Table of Contents (sidebar)</h4>
    <ul>
      <li>Link to heading id "topic-1"</li>
      <li>Link to heading id "subtopic-1a"</li>
      <li>Link to heading id "subtopic-1b"</li>
    </ul>
  </div>
</nav>

Style Rules

Add style rules for the classes in the stylesheet.

The navbar-nav class in the ul element removes the bullet point, margin and padding.
The nav-item class on each list item changes the display property from block (the default) to inline. That will put each list item on the same line, instead of creating a new line for each.

stylesheets/styles.css

.navbar-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.nav-item {
  display: inline;
}

View the changes in the browser

Save the changes to those files, and go to browser to see it at http://localhost:5500 and http://localhost:5500/articles/article-template.html.
Make sure you changed the .vs-code/settings.json to /Blog-Site-v7 before starting Live Server.
You should see that the Navbar and Footer have list items without bullet points. The navbar is still on two lines for now. The Footer items should all be on one line.

Tables

Now let's look at tables (see CheatSheet: Tables category).

Basic Table: You can make a basic table.

<table>
  <thead>
    <tr><th>Header Col 1</th><th>Header Col 2</th></tr>
  </thead>
  <tbody>
    <tr><td>Row 1 - Col 1</td><td>Row 1 - Col 2</td></tr>
    <tr><td>Row 2 - Col 1</td><td>Row 2 - Col 2</td></tr>
  </tbody>
</table>

table: Wrap the table in a table tag.

thead: Wrap the heading section in a thead tag.

tr: Wrap each row in tr table row tags.

th: Wrap each column heading in th tags.

tbody: Wrap the table body in a tbody tag.

tr: Wrap each row in a tr table row tag.

td: Wrap each cell in a td table data tag.

Table with footer and caption: You can also add a caption and a footer to the table.

<table>
  <caption>Articles</caption>
  <thead>
    <tr><th>#</th><th>Title</th><th>Author</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Learn HTML</td><td>Joey R</td></tr>
    <tr><td>2</td><td>Learn CSS</td><td>Sheena R</td></tr>    
  </tbody>
  <tfoot>
    <tr><td colspan="3">Footer text</td></tr>
  </tfoot>
</table>

Table Styling

Without any styling, the table will be pretty ugly. Add the below style rules to the stylesheet.
As usual, we are mimicking the Bootstrap styling.

stylesheets/styles.css

table {
  caption-side: bottom;
  border-collapse: collapse;
}
th {
  text-align: left;
}
tbody, td, tfoot, th, thead, tr {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}
.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  border-color: #dee2e6;
}
.table>:not(caption)>*>* {
  padding: 0.5rem;
  border-bottom-width: 1px;
}
.table>:not(:first-child) {
  border-top: 2px solid currentColor;
}
.table thead {
  vertical-align: bottom;
}
.table tbody {
  vertical-align: top;
}
caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: #6c757d;
  text-align: left;
}

Notice we are setting some style rules directly on the table tags. These style rules will automatically apply to those tags without having to add a class.

These include:

The table tag - caption-side and border-collapse

table {
  caption-side: bottom;
  border-collapse: collapse;
}

If there is a caption element, it will be placed at the bottom of the table.
We set the border-collapse property to collapse because by default, if you put borders around each table cell, there would be a gap between each cell. We we collapse them, the gap disappears.

The th tag - align table header text to the left

By default, the table head element aligns the text to the center. We'll change that to align to the left:

th {
  text-align: left;
}

Set border properties

We'll change the border style for the various table tags:

tbody, td, tfoot, th, thead, tr {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

Each tag will inherit the border color from the parent element. If you don't set a border in any table element, the color will be the same charcoal color that our text is. But if you change the border-color property in the table tag, all the other tags in the table will inherit that color.
We'll set the border-style to solid.
Border width is set to 0. So by default the borders are not showing. To show a border we would need to change border-width with a class.

table class - set width, color, margin, padding, border

Now we'll get into the table classes, starting with .table.

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  border-color: #dee2e6;
}
.table>:not(caption)>*>* {
  padding: 0.5rem;
  border-bottom-width: 1px;
}
.table>:not(:first-child) {
  border-top: 2px solid currentColor;
}

Put the table class in the table tag like so: <table class="table">...</table>
The table will take up 100% of the width of the parent element.
It will have a 1rem (16px) bottom margin.
The text color is a charcoal-like color. The border is a light grey.
For each descendent of the table class element going down three levels apply the following style rules, unless the child element is a caption.

Add .5rem (8px) of padding.
Set the border-bottom-width to 1px.

For each child element of the table class element set the top border to 2px wide, solid line, using the text color of the element, unless it is the first child.

Vertical align

If the content of a table cell does not fit on one line, then the row will increase to two lines. For the other cells that are still only one line, the default vertical alignment is to the center.

We will stick with that default behavior for the table footer.
We'll align the table head to the bottom.
We'll align the table body to the top.

.table thead {
  vertical-align: bottom;
}
.table tbody {
  vertical-align: top;
}

Caption

If there is a caption:

We'll set the top and bottom padding to .5rem (8px).
Give the text a grey color.
Align the text to the left. The default text alignment for a caption is to the center.

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: #6c757d;
  text-align: left;
}

Border

It is a little confusing how the above styles affect the borders. The end result is:

No border at the top or on the sides.
It places a 2px border above the table body, footer, and caption. The border color is charcoal, except it is gray above the caption.
A 1px light gray border is placed between each table body row.

View the table in the browser

Save the changes to those files, and go to browser to see to see the styled table at http://localhost:5500/articles/article-template.html.
The example code has a table there, or you can insert one yourself. Just add the table class to the table element: <table class="table">

Bootstrap Table Classes

Bootstrap has other classes for tables.
Bootstrap documentation on Tables styling is at: getbootstrap.com/docs > click Content: Tables

Bootstrap table classes include:

table Basic table class
To color the whole table, or individual rows or cells apply class:
table-light table-dark table-primary table-secondary table-success table-warning table-danger table-info
table-striped adds grey background to every other row.
table-striped-columns adds grey background to every other column.
table-hover adds grey background to row on hover.
table-active adds grey background to the row or cell the class is applied to.
table-bordered adds borders around each cell.
table-borderless removes all borders on the table.
table-sm makes the table smaller by cutting the cell padding in half.

Place these classes in the table tag.
Example:

<table class="table table-dark table-sm table-hover">
  ...
</table>

View the additional Bootstrap classes

We are not adding these additional styles in our own stylesheet though. If you want to see them with the Bootstrap CDN:

Add the additional classes to the table tag.
Comment out the local stylesheets/styles.css.
Uncomment the Bootstrap CDN link.
Save the changes.
Go to the browser http://localhost:5500/articles/article-template.html and refresh the page.
Now switch it back: comment out the Bootstrap CDN, and uncomment the local stylesheet.

Working with Lists and Tables (Video Tutorial)

Working with Lists and Tables

Intro to Lists and Tables

Lists

Unordered Lists

Ordered Lists

Description list

Bootstrap list styling

Lists in Navigation elements

Add lists and classes to the nav and footer lists

articles/article-template.html

Style Rules

stylesheets/styles.css

View the changes in the browser

Tables

Table Styling

stylesheets/styles.css

The table tag - caption-side and border-collapse

The th tag - align table header text to the left

Set border properties

table class - set width, color, margin, padding, border

Vertical align

Caption

Border

View the table in the browser

Bootstrap Table Classes

View the additional Bootstrap classes