Barra horizontal HTML

  2. HowTo
  3. HTML Howtos
  4. Barra horizontal HTML
Zeeshan Afridi 20 junio 2023
HTML HTML Bar
  1. Generar barra horizontal en HTML
  2. Conclusión
Barra horizontal HTML

Las barras HTML son herramientas muy comunes que se utilizan para representar datos numéricos. Da una representación gráfica de datos numéricos.

Hay dos tipos de barras HTML:

  1. Barra horizontal
  2. Barra vertical

Pero este artículo trata sobre la barra horizontal HTML, y veremos cómo podemos generar una barra horizontal en HTML simple.

Podemos trabajar con cualquier tecnología como MS Office, HTML sin formato y componentes de oficina web, pero usar HTML sin formato es el más simple de todos. Así que aquí vamos a ver los pasos necesarios para crear una barra horizontal HTML efectiva.

Generar barra horizontal en HTML

Seguiremos unos sencillos pasos para generar una barra horizontal HTML. Los componentes básicos de una barra horizontal HTML son una tabla HTML, etiquetas <p> y <div>.

Es un conjunto de etiquetas <p> y <div> colocadas dentro de las etiquetas <td> de una tabla HTML <tr>.

Pasos para generar la barra horizontal HTML.

  1. Toma una tabla HTML

    <table></table>

  2. Determine el número de filas que necesita en la tabla. Cada fila de la tabla representará una barra horizontal HTML.

  3. Agregue dos columnas en cada fila. El código debería verse así:

    <table>
   <tr>
	   <td></td>
	   <td></td>
   </tr>
</table>

  1. En la primera columna, agregue la etiqueta <div> o <p> con una etiqueta para el eje Y.

  2. En la segunda columna de la etiqueta <tr>, agregue una etiqueta <div>. El <div> tomará la propiedad style con diferente background-color y width. El código se verá así:

    <table>
   <tr>
	   <td>
		   <div>
			   HTML Horizontal Bar
		   </div>
	   </td>
	   <td>
		   <div style= 'background-color: blue; width: 300px'>
			   HTML Horizontal Bar
		   </div>
	   </td>
   </tr>
</table>

Código completo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML: The strong and em tags</title>
</head>
<body>

    <table>
    <tr>
        <td>
            <div>
                HTML Horizontal Bar1
            </div>
        </td>
        <td>
            <div style= 'background-color: blue; width: 300px'>
                HTML Horizontal Bar1
            </div>
        </td>
    </tr>

    <table>
    <tr>
        <td>
            <div>
                HTML Horizontal Bar2
            </div>
        </td>
        <td>
            <div style= 'background-color: black; width: 400px'>
                HTML Horizontal Bar2
            </div>
        </td>
    </tr>
</table>
</table>
</body>
</html>

Conclusión

Para resumir el artículo, hemos discutido qué es una barra horizontal, sus tipos y cómo crearla en HTML simple. Además, hemos discutido los pasos necesarios para crear una barra horizontal HTML y las etiquetas utilizadas para generar una barra horizontal en HTML simple.

Autor: Zeeshan Afridi
Zeeshan Afridi avatar Zeeshan Afridi avatar

Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.

LinkedIn