Examples for customized Table of Contents
In this section there are some formatting examples of generating Table of Contents. The HTML code is the same in all cases.
Example for flat Table of Contents
The HTML source of a Table of Contents - the flat type
<div class='page table-of-contents'>
<h1>Table of Contents</h1>
<div class="cex-toc-container cex-toc-container-level-1">
<div class="cex-toc-item cex-toc-item-level-1 cex-toc-ref-to-page" id="cex-toc-level-1">
<a class="cex-toc-counter" href="#Bookmark1">1. - </a>
<a class="cex-toc-text" href="#Bookmark1">Table of Contents sample page Home</a>
<a class="cex-toc-page-number" href="#Bookmark1"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-2">
<div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-1">
<a class="cex-toc-counter" href="#Bookmark2">1.1. - </a>
<a class="cex-toc-text" href="#Bookmark2">Heading one</a>
<a class="cex-toc-page-number" href="#Bookmark2"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-2">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-1-1">
<a class="cex-toc-counter" href="#Bookmark3">1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark3">Heading two</a>
<a class="cex-toc-page-number" href="#Bookmark3"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-3"
id="cex-toc-level-1-1-1-1">
<a class="cex-toc-counter" href="#Bookmark4">1.1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark4">Heading three</a>
<a class="cex-toc-page-number" href="#Bookmark4"></a>
</div>
</div>
</div>
</div>
<div class="cex-toc-container cex-toc-container-level-2">
<div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-page" id="cex-toc-level-1-2">
<a class="cex-toc-counter" href="#Bookmark5">1.2. - </a>
<a class="cex-toc-text" href="#Bookmark5">First page in the space</a>
<a class="cex-toc-page-number" href="#Bookmark5"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-1">
<a class="cex-toc-counter" href="#Bookmark6">1.2.1. - </a>
<a class="cex-toc-text" href="#Bookmark6">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark6"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-2-1-1">
<a class="cex-toc-counter" href="#Bookmark7">1.2.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark7">Heading Two</a>
<a class="cex-toc-page-number" href="#Bookmark7"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-3" id="cex-toc-level-1-2-1-1-1">
<a class="cex-toc-counter" href="#Bookmark8">1.2.1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark8">Heading Three</a>
<a class="cex-toc-page-number" href="#Bookmark8"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-2">
<a class="cex-toc-counter" href="#Bookmark9">1.2.2. - </a>
<a class="cex-toc-text" href="#Bookmark9">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark9"></a>
</div>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-page" id="cex-toc-level-1-2-3">
<a class="cex-toc-counter" href="#Bookmark10">1.2.3. - </a>
<a class="cex-toc-text" href="#Bookmark10">Subpage</a>
<a class="cex-toc-page-number" href="#Bookmark10"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-3-1">
<a class="cex-toc-counter" href="#Bookmark11">1.2.3.1. - </a>
<a class="cex-toc-text" href="#Bookmark11">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark11"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-2-3-1-1">
<a class="cex-toc-counter" href="#Bookmark12">1.2.3.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark12">Heading Two</a>
<a class="cex-toc-page-number" href="#Bookmark12"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-page" id="cex-toc-level-1-2-4">
<a class="cex-toc-counter" href="#Bookmark13">1.2.4. - </a>
<a class="cex-toc-text" href="#Bookmark13">Subpage with not ordered headers</a>
<a class="cex-toc-page-number" href="#Bookmark13"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-4-1">
<a class="cex-toc-counter" href="#Bookmark14">1.2.4.1. - </a>
<a class="cex-toc-text" href="#Bookmark14">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark14"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-2" id="cex-toc-level-1-2-4-1-1">
<a class="cex-toc-counter" href="#Bookmark15">1.2.4.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark15">Heading Three</a>
<a class="cex-toc-page-number" href="#Bookmark15"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-5">
<div class="cex-toc-item cex-toc-item-level-6 cex-toc-ref-to-header cex-toc-original-header-5 cex-toc-normalized-header-3" id="cex-toc-level-1-2-4-1-1-1">
<a class="cex-toc-counter" href="#Bookmark16">1.2.4.1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark16">Heading Five</a>
<a class="cex-toc-page-number" href="#Bookmark16"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-4-2">
<a class="cex-toc-counter" href="#Bookmark17">1.2.4.2. - </a>
<a class="cex-toc-text" href="#Bookmark17">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark17"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-page" id="cex-toc-level-1-3">
<a class="cex-toc-counter" href="#Bookmark18">1.3. - </a>
<a class="cex-toc-text" href="#Bookmark18">Second page in the space</a>
<a class="cex-toc-page-number" href="#Bookmark18"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-3-1">
<a class="cex-toc-counter" href="#Bookmark19">1.3.1. - </a>
<a class="cex-toc-text" href="#Bookmark19">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark19"></a>
</div>
</div>
</div>
</div>
</div>The default flat-type Table of Contents
The custom stylesheet:
.cex-toc-page-number::after{
content: leader(dotted) target-counter(attr(href), page, decimal);
}
.table-of-contents a:link,
.table-of-contents a:visited,
.table-of-contents a:hover,
.table-of-contents a:active
{
text-decoration: none;
}
.cex-toc-ref-to-page {
font-weight: bold;
}
.cex-toc-ref-to-header {
font-style: italic;
}The output:
No line to the page numbers
The custom stylesheet:
.table-of-contents .cex-toc-page-number::after{
content: leader(" ") target-counter(attr(href), page, decimal);
}The output:
"-" character as line to the page numbers
The custom stylesheet:
.table-of-contents .cex-toc-page-number::after{
content: leader(" - ") target-counter(attr(href), page, decimal);
}The output:
No headings
The custom Stylesheet:
.cex-toc-counter {
display: none;
}The output:
No bold style for pages
The custom stylesheet:
.table-of-contents .cex-toc-ref-to-page {
font-weight: normal;
}The output:
Heading levels with different font weight
The custom stylesheet:
.table-of-contents .cex-toc-container-level-0 {
font-weight: 900;
}
.table-of-contents .cex-toc-container-level-1 {
font-weight: 700;
}
.table-of-contents .cex-toc-container-level-2 {
font-weight: 600;
}
.table-of-contents .cex-toc-container-level-3 {
font-weight: 400;
}
.table-of-contents .cex-toc-container-level-4 {
font-weight: 300;
}
.table-of-contents .cex-toc-container-level-5 {
font-weight: 100;
}The output:
Example for hierarchical Table of Contents
The HTML source of a Table of Contents - the hierarchical type
<div class='page table-of-contents hierarchical'>
<h1>Table of Contents</h1>
<div class="cex-toc-container cex-toc-container-level-1">
<div class="cex-toc-item cex-toc-item-level-1 cex-toc-ref-to-page" id="cex-toc-level-1">
<a class="cex-toc-counter" href="#Bookmark1">1. - </a>
<a class="cex-toc-text" href="#Bookmark1">Table of Contents sample page Home</a>
<a class="cex-toc-page-number" href="#Bookmark1"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-2">
<div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-1">
<a class="cex-toc-counter" href="#Bookmark2">1.1. - </a>
<a class="cex-toc-text" href="#Bookmark2">Heading one</a>
<a class="cex-toc-page-number" href="#Bookmark2"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-2">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-1-1">
<a class="cex-toc-counter" href="#Bookmark3">1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark3">Heading two</a>
<a class="cex-toc-page-number" href="#Bookmark3"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-3"
id="cex-toc-level-1-1-1-1">
<a class="cex-toc-counter" href="#Bookmark4">1.1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark4">Heading three</a>
<a class="cex-toc-page-number" href="#Bookmark4"></a>
</div>
</div>
</div>
</div>
<div class="cex-toc-container cex-toc-container-level-2">
<div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-page" id="cex-toc-level-1-2">
<a class="cex-toc-counter" href="#Bookmark5">1.2. - </a>
<a class="cex-toc-text" href="#Bookmark5">First page in the space</a>
<a class="cex-toc-page-number" href="#Bookmark5"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-1">
<a class="cex-toc-counter" href="#Bookmark6">1.2.1. - </a>
<a class="cex-toc-text" href="#Bookmark6">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark6"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-2-1-1">
<a class="cex-toc-counter" href="#Bookmark7">1.2.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark7">Heading Two</a>
<a class="cex-toc-page-number" href="#Bookmark7"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-3" id="cex-toc-level-1-2-1-1-1">
<a class="cex-toc-counter" href="#Bookmark8">1.2.1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark8">Heading Three</a>
<a class="cex-toc-page-number" href="#Bookmark8"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-2">
<a class="cex-toc-counter" href="#Bookmark9">1.2.2. - </a>
<a class="cex-toc-text" href="#Bookmark9">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark9"></a>
</div>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-page" id="cex-toc-level-1-2-3">
<a class="cex-toc-counter" href="#Bookmark10">1.2.3. - </a>
<a class="cex-toc-text" href="#Bookmark10">Subpage</a>
<a class="cex-toc-page-number" href="#Bookmark10"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-3-1">
<a class="cex-toc-counter" href="#Bookmark11">1.2.3.1. - </a>
<a class="cex-toc-text" href="#Bookmark11">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark11"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-2-3-1-1">
<a class="cex-toc-counter" href="#Bookmark12">1.2.3.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark12">Heading Two</a>
<a class="cex-toc-page-number" href="#Bookmark12"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-page" id="cex-toc-level-1-2-4">
<a class="cex-toc-counter" href="#Bookmark13">1.2.4. - </a>
<a class="cex-toc-text" href="#Bookmark13">Subpage with not ordered headers</a>
<a class="cex-toc-page-number" href="#Bookmark13"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-4-1">
<a class="cex-toc-counter" href="#Bookmark14">1.2.4.1. - </a>
<a class="cex-toc-text" href="#Bookmark14">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark14"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-2" id="cex-toc-level-1-2-4-1-1">
<a class="cex-toc-counter" href="#Bookmark15">1.2.4.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark15">Heading Three</a>
<a class="cex-toc-page-number" href="#Bookmark15"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-5">
<div class="cex-toc-item cex-toc-item-level-6 cex-toc-ref-to-header cex-toc-original-header-5 cex-toc-normalized-header-3" id="cex-toc-level-1-2-4-1-1-1">
<a class="cex-toc-counter" href="#Bookmark16">1.2.4.1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark16">Heading Five</a>
<a class="cex-toc-page-number" href="#Bookmark16"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-4-2">
<a class="cex-toc-counter" href="#Bookmark17">1.2.4.2. - </a>
<a class="cex-toc-text" href="#Bookmark17">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark17"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-page" id="cex-toc-level-1-3">
<a class="cex-toc-counter" href="#Bookmark18">1.3. - </a>
<a class="cex-toc-text" href="#Bookmark18">Second page in the space</a>
<a class="cex-toc-page-number" href="#Bookmark18"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-3-1">
<a class="cex-toc-counter" href="#Bookmark19">1.3.1. - </a>
<a class="cex-toc-text" href="#Bookmark19">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark19"></a>
</div>
</div>
</div>
</div>
</div>Default settings for generating Table of Contents
The custom stylesheet:
.cex-toc-page-number::after{
content: leader(dotted) target-counter(attr(href), page, decimal);
}
.table-of-contents a:link,
.table-of-contents a:visited,
.table-of-contents a:hover,
.table-of-contents a:active
{
text-decoration: none;
}
.hierarchical .cex-toc-container {
margin-left: 10px;
}
.cex-toc-ref-to-page {
font-weight: bold;
}
.cex-toc-ref-to-header {
font-style: italic;
}The output:
Bigger spaces in case of levels
The custom stylesheet:
.table-of-contents.hierarchical .cex-toc-container {
margin-left: 20px;
}The output:
A narrower Table of Contents
The custom stylesheet:
.table-of-contents {
margin: 0 120px 0 120px;
}The output:
Last updated
Was this helpful?