Markdown | Using tables 👨‍💻 [ENG - Esp]

in Aliento • 4 months ago
20221112_141201_0000.png
Made with Canva

Generally, tables have always been used to organize data and even elements in web pages, databases or simply data on the screen, it is very easy, since with a simple syntax we can define the structure of a table with the elements > | < and > - < , that's all it takes to define a simple table, let's see the example:


syntax

  • | titles |
    |------|
    |Data|

Result

titles
Data

It is a very easy way to use and order elements, of course with this type of structure we can play with the number of columns and rows we want by adding more separators to the syntax code.
One of the ways I use it to order and separate paragraphs into sections through their titles is as follows.


syntax

  • | My title between paragraphs |
    |------

Result

My title between paragraphs

Here we make good use of the structure of a table header to organize our paragraphs or segments in our article more aesthetically. If we want to center the text, just add the tag < center > enclosing our title and it will be centered as follows.


syntax

  • | < center>My title between centered paragraphs< /center>|
    |------

Result

My title between centered paragraphs

Personally, this is a very practical way to take advantage of this, since it is useful to divide our segments on the screen, of course! In HTML it is a bit different.


Now we are going to practice ordering another type of element on the screen, in this case the images! It is the one I particularly like to use, because it helps me preserve the aesthetics on any type of screen and also preserves its title or description of the image without altering it. Let's see an example.


syntax

  • | < center> my image < /center>|
    |------|
    |< center>Description of my image< /center>|

Result

IMG_20221110_180526_062.jpg
my description

You may wonder why I center the image and also the description, and well, the answer is that if the screen dimension is large, the elements contained in the tables will be aligned to the left and aesthetically it does not look good! To give a little more aesthetics and differentiate the title from the rest of our article, we can take advantage of the < sub > tag and we will have something like this.


syntax

  • | < center> My Image < /center>|
    |------|
    |< center>< sub>Description of my image</ sub>< /center>|

Result

IMG_20221110_180526_062.jpg
My description

This will slightly change the size of the text which will noticeably differentiate the writing or description of the element from the other paragraphs.

Another way to take advantage of this element with the images is to organize them as a gallery, we can also add a description to each one of them, this is useful for when we are going to write a tutorial type article where we are going to use many images and we can reference them through their titles, something would remain like this for two images:


syntax

  • | Img 1| Img 2|
    |------|-----|
    |< center>< sub>Description of my image 1</ sub>< /center>|< center>< sub>Description of my image 2</ sub>< /center>|

Result

IMG_20221110_180526_062.jpgIMG_20221110_180526_062.jpg
Description of my image 1
Description of my image 2

In this case it will not be necessary to center our images, since these will automatically occupy the space in their cells. And of course, this one we can organize our elements in a table as we want, we can organize our rows of images, I recommend up to 3, and we also have the option of organizing a collage of 4 images in a single 2x2 table.

  • Recommendations!

We must always keep in mind that when we are going to use images for our blog they should be horizontal, since the distribution of the elements on the screen looks more aesthetic.

  • I also recommend that if we are going to organize images in tables, they should all be of the same dimension and orientation so that it is well distributed and aesthetically perfect.

I hope you like my first post! Others I will leave attached my presentation publication to the community! But before thanking each of the people who received me in my presentation, I could not answer all the comments due to lack of credits!


Version en Español [ESP]
20221112_141239_0000.png
creada con canva

Generalmente, las tablas siempre han sido utilizadas para organizar datos y hasta elementos en las páginas web, base de datos o simplemente datos en pantalla, es muy fácil, ya que con una simple sintaxis podemos definir la estructura de una tabla con los elementos > | < y > - < , solo basta con eso para definir una tabla simple veamos el ejemplo:


sintaxis

  • | títulos |
    |------|
    |Datos|

Resultado

títulos
Datos

Es una forma muy fácil de emplear y ordenar elementos, claro con este tipo de estructura podemos jugar con la cantidad de columnas y filas que queramos agregando más separadores al código de sintaxis.
Una de las formas en la que la empleo para ordenar y separar párrafos en secciones mediantes sus títulos es de la siguiente manera.


sintaxis

  • | Mi título entre párrafos|
    |------

Resultado

Mi título entre párrafos

Aquí aprovechamos de muy buena forma la estructura de una cabecera de una tabla para organizar más estéticamente nuestros párrafos o segmentos en nuestro artículo. Si queremos centrar el texto solo basto con agregar la etiqueta < center > encerrando nuestro título y este así quedará centrado de la forma siguiente.


sintaxis

  • | < center>Mi título entre párrafos centrados< /center>|
    |------

Resultado

Mi título entre párrafos centrados

¡En lo personal este es una forma muy práctica de aprovechar esto, ya que es útil para dividir nuestros segmentos en pantalla, claro! En HTML es un poco distinto.


¡Ahora vamos a realizar la práctica de ordenar otro tipo de elemento en pantalla, en este caso las imágenes! Particularmente es el que me gusta usar, porque me ayuda a conservar la estética en cualquier tipo de pantalla y además conserva su título o descripción de la imagen sin alterarlo. Veamos un ejemplo.


sintaxis

  • | < center> Mi imagen < /center>|
    |------|
    |< center>Descripción de mi imagen< /center>|

Resultado

IMG_20221110_180526_062.jpg
mi descripción

¡Se preguntarán porque centro la imagen y también la descripción, y bueno, la respuesta es que si la dimensión de la pantalla es grande, los elementos contenidos en las tablas se alinearán a la izquierda y estéticamente no se ve bien! Para dar un poco más de estética y diferencia el título del resto de nuestro artículo podemos aprovechar la etiqueta < sub > y nos quedará algo así.


sintaxis

  • | < center> Mi imagen < /center>|
    |------|
    |< center>< sub>Descripción de mi imagen</ sub>< /center>|

Resultado

IMG_20221110_180526_062.jpg
Mi descripción

Esto va a cambiar ligeramente el tamaño del texto que notablemente diferenciara la escritura o descripción del elemento de los demás párrafos.

Otra manera de aprovechar este elemento con las imágenes es organizándolas como galería, también podemos agregar descripción a cada una de ellas, esto sirve para cuando vamos a redactar un artículo tipo tutorial donde vamos a utilizar muchas imágenes y podemos referenciarlas mediantes sus títulos, quedaría algo así para dos imágenes:


sintaxis

  • | Mi imagen 1 | Mi imagen 2 |
    |------|
    |< center>< sub>Descripción de mi imagen 1</ sub>< /center>|< center>< sub>Descripción de mi imagen 2</ sub>< /center>|

Resultado

IMG_20221110_180526_062.jpgIMG_20221110_180526_062.jpg
Descripción de mi imagen 1
Descripción de mi imagen 2

En este caso no será necesario centrar nuestras imágenes, ya que estas automáticamente ocuparan el espacio en sus celdas. Y claro, esta podremos organizar nuestros elementos en tabla como queramos, podemos organizar nuestras filas de imágenes, recomiendo hasta 3, y también tenemos la opción de organizar un collage de 4 imágenes en una sola tabla de 2x2.

  • Recomendaciones!

Siempre hay que tener en cuenta que cuando vamos a utilizar imágenes para nuestro blog deberían ser horizontales, ya que se ve más estética la distribución de los elementos en pantalla.

  • también recomiendo que si vamos a organizar imágenes en tablas, estas deberían ser todas de la misma dimensión y orientación para que quede bien distribuida y estéticamente perfecto.

¡Espero que les guste mi primer post! ¡A demás les dejaré adjunto mi publicación de presentación a la comunidad! ¡Pero antes agradeciéndoles a cada uno de las personas que me recibieron en mi presentación, no pude responder todos los comentarios por falta de créditos!

the images used are my own - las imágenes utilizadas son de mi autoría

png_20221111_151744_0000.png
Telegram° WhatsApp ° Instagram
@Jordanbr ∆
Sort:  

Congratulations @jordanbr! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You made more than 10 comments.
Your next target is to reach 50 comments.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Support the HiveBuzz project. Vote for our proposal!