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: