es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

HTML: ¿Cómo cambiar la alineación dentro de una fila de una tabla?

05 Aug, 2023 Programación

Tengo esta fila de tabla rápida y poco profesional que se construye así:

<tr>
    <th colspan="2" align="right">
    <p style="display:inline; vertical-align:middle; align:left" id="waschmaschine"><img src="wm_2.png" height="28px"> </p> 
    <p style="display:inline" id="temp_innen">26.11</p>°C |
    <p style="display:inline" id="humid_innen">24.17</p>% |
    <p style="display:inline" id="localtime">2022.01.06 15:35</p> 
    </th>
</tr>

Se utilizan los identificadores, ya que el texto se cambia más adelante mediante un breve script de Java.

Como puede ver, tengo este texto justificado a la derecha y quiero mostrar un icono en el lado izquierdo de la fila de la tabla. ¿Cómo puedo lograr esto, preferiblemente sin usar un archivo CSS?

Muchas gracias de antemano.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el resultado deseado sin usar un archivo CSS, puedes usar una combinación de HTML y estilos en línea.

    Una forma de hacerlo es agregar otra columna a la izquierda de la existente y establecer el ancho de esa columna al ancho del ícono que deseas mostrar. Luego, agrega el ícono dentro de esa columna y utiliza la propiedad “vertical-align” para alinearlo con el texto de la otra columna.

    Aquí tienes un ejemplo:

    <tr>
  <td style="width: 30px;">
    <img src="icon.png" height="28px">
  </td>
  <th colspan="2" align="right">
    <p style="display:inline; vertical-align:middle;" id="waschmaschine"><img src="wm_2.png" height="28px"></p> 
    <p style="display:inline" id="temp_innen">26.11</p>°C | 
    <p style="display:inline" id="humid_innen">24.17</p>% | 
    <p style="display:inline" id="localtime">2022.01.06 15:35</p> 
  </th>
</tr>

    En este ejemplo, agregamos un nuevo elemento td antes del elemento th existente y establecimos su ancho en 30 píxeles (ajusta este valor al ancho de tu ícono real). Luego, agregamos una etiqueta img dentro de ese elemento td para mostrar el ícono.

    También agregamos el estilo “vertical-align: middle” al elemento img para alinearlo verticalmente con el texto de la otra columna.

    Ten en cuenta que esta es solo una forma de lograr el resultado deseado sin usar un archivo CSS. Dependiendo de tus necesidades y restricciones específicas, puede haber otras formas de lograrlo también.

Comments are closed.