Tal como te dijeron lo haces con HTML, e incluso puedes aplicar estilos para que quede una tabla o sección más interesante aún.
No soy un webmaster, así que si yo pude entender algo (lo básico o mínimo), no se te será complicado crear lo que mencionas. Para aquello sería de tomar en cuenta dos cosas:
- Un id (#), para el título o subtítulos de la tabla que servirá para enlazar a los títulos y subtítulos del contenido redactado más abajo.
- Un atributo "name" que es la dirección a la que irá al hacer clic en la etiqueta anterior.
Este método es el uso de anclas en la redacción del blog.
Para que tú mismo leas y practiques te dejo estos
dos artículos relacionados:
Adicionalmente te dejo un vídeo demostrativo, que me ayudó en su momento:
La forma en cómo armas tu tabla de contenido depende de tí, y para ello te dejo un artículo donde se mencionan las principales etiquetas en el html desde títulos, subtítulos, negrita, cursiva..etc..
Si tienes problemas con que te marque de otro color el título con el "id" al ser enlazado, para solventar esto (aunque solo es estético) se puede agregar un class para agregar estilos css, además de otras modificaciones como padding para dar espacios en subtítulos (si lo deseas).
De dejaré un ejemplo explicativo:
Colocas un <h1> o etiqueta de cualquier nivel para el título de la tabla:
HTML:
<div class="list-1"><h1><font size="4">Tabla de Contenido</font></h1></div>
Como te fijarás he puesto algunas cosas extras, y eso lo pondrías solo si deseas darle estilos personalizados, allí puse un div para encerrar el título de la "tabla"
(que no es tabla, ya que para eso pues igual hay otros elementos propios de ello) y posiblemente alguna función con java script tipo "spoiler", darle color de fondo entre otras cosas, y un "font-size" para establecer un tamaño de letra personalizado.
Si no deseas nada de eso, a continuación ya haré el html más simple:
HTML:
<div>
<h2>Tabla de Contenido</h2>
<h3><a href="#til-1">Título 1</a></h3>
<h4><a href="#subtil-1">Subtítulo 1</a></h4>
<h3><a href="#til-2"> Título 2</a></h3>
<h4><a href="#subtil-2"> Subtítulo 2 </a></h4>
</div>
<br><br>
<h3><a name="til-1"><span> Título 1</span></a></h3>
<p>Aquí la redacción del título<br>
Lorem ipsum dolor sit amet consectetur adipiscing elit semper inceptos urna aliquet sociis volutpat natoque lobortis, a montes posuere rhoncus ornare tortor duis tincidunt risus augue proin vel eu. Quisque sapien interdum fringilla condimentum laoreet facilisi libero aenean, vitae magnis dignissim tempor nunc ullamcorper diam, ad suspendisse eleifend ultricies cras tristique elementum. Montes convallis nisi neque elementum porta parturient, pulvinar nascetur duis sem purus turpis volutpat, fermentum maecenas sociosqu donec conubia.<br>Lorem ipsum dolor sit amet consectetur adipiscing elit semper inceptos urna aliquet sociis volutpat natoque lobortis, a montes posuere rhoncus ornare tortor duis tincidunt risus augue proin vel eu. Quisque sapien interdum fringilla condimentum laoreet facilisi libero aenean, vitae magnis dignissim tempor nunc ullamcorper diam, ad suspendisse eleifend ultricies cras tristique elementum. Montes convallis nisi neque elementum porta parturient, pulvinar nascetur duis sem purus turpis volutpat, fermentum maecenas sociosqu donec conubia.</p>
<h4><a name="subtil-1"> Subtítulo 1</a></h4>
<p>Aquí la redacción de lo del subtítulo 1<br>
Lorem ipsum dolor sit amet consectetur adipiscing elit semper inceptos urna aliquet sociis volutpat natoque lobortis, a montes posuere rhoncus ornare tortor duis tincidunt risus augue proin vel eu. Quisque sapien interdum fringilla condimentum laoreet facilisi libero aenean, vitae magnis dignissim tempor nunc ullamcorper diam, ad suspendisse eleifend ultricies cras tristique elementum. Montes convallis nisi neque elementum porta parturient, pulvinar nascetur duis sem purus turpis volutpat, fermentum maecenas sociosqu donec conubia.</p>
<h3><a name="til-2"> Título 2</a></h3>
<p>Aquí la redacción del título<br>
Lorem ipsum dolor sit amet consectetur adipiscing elit semper inceptos urna aliquet sociis volutpat natoque lobortis, a montes posuere rhoncus ornare tortor duis tincidunt risus augue proin vel eu. Quisque sapien interdum fringilla condimentum laoreet facilisi libero aenean, vitae magnis dignissim tempor nunc ullamcorper diam, ad suspendisse eleifend ultricies cras tristique elementum. Montes convallis nisi neque elementum porta parturient, pulvinar nascetur duis sem purus turpis volutpat, fermentum maecenas sociosqu donec conubia.<br>Lorem ipsum dolor sit amet consectetur adipiscing elit semper inceptos urna aliquet sociis volutpat natoque lobortis, a montes posuere rhoncus ornare tortor duis tincidunt risus augue proin vel eu. Quisque sapien interdum fringilla condimentum laoreet facilisi libero aenean, vitae magnis dignissim tempor nunc ullamcorper diam, ad suspendisse eleifend ultricies cras tristique elementum. Montes convallis nisi neque elementum porta parturient, pulvinar nascetur duis sem purus turpis volutpat, fermentum maecenas sociosqu donec conubia.</p>
<h4><a name="subtil-2"> Subtítulo 2</a></h4>
<p>Aquí la redacción de lo del subtítulo 1</p>
Como había mencionado antes, en caso de que desees que no cambie de color por tratarse de un elemento enlazado, puedes aplicar un class y colocar otro color, o bien colocar los títulos y subtítulos de la redacción entre <span></span>, y colocar el siguiente estilo:
CSS:
<style>
a > span {color: white;}
</style>
O ingeniarte tú mismo algo.
No está demás recordar que las anclas las puedes colocar en donde quieras del html, si lees los artículos que he puesto o vídeo sabrás a lo que me refiero, por tanto, la estructura o html que puse entre h3,h4, bien puedes colocar el id o name entre otros elementos como <li> <ol>, etc..., no necesariamente debes seguir lo que puse, experimenta.
Espero te sirva de algo (y si me he equivocado en algo perdón jaja), por cierto creo que igual podrías aprender a crear una tabla y colocar anclas allí~
