Cómo establecer el ancho y el alto de las celdas de una tabla html

Al crear páginas web, a menudo nos encontramos con el problema de los anchos de las tablas desalineados. He examinado en detalle los detalles de la configuración de alto y ancho de la etiqueta de la tabla en HTML y ahora lo resumo de la siguiente manera:

1. La configuración de ancho y alto en la tabla y sus funciones : la altura establecida en la tabla en realidad establece un valor mínimo, es decir, cuando el contenido de la tabla o la altura total de la fila excede este valor establecido, el valor de altura de la tabla La tabla se extenderá automáticamente, cuando el contenido o la altura de la fila en la tabla no alcance este valor, se expandirá automáticamente a este valor. El valor de ancho establecido en la tabla es generalmente el valor máximo del ancho de la tabla y no se puede cambiar, incluso si el ancho del contenido interno lo excede. (Si el contenido interno es una imagen, se puede cambiar el ancho de la tabla).

2. La configuración de ancho y alto en la etiqueta tr y sus funciones : La configuración de ancho en la etiqueta tr no tiene ningún efecto, porque como se puede ver desde el primer punto, el ancho de la tabla no se puede cambiar y la etiqueta tr Por supuesto no tiene ningún efecto. Por lo tanto, solo es posible discutir la configuración de altura en tr. La configuración de altura en tr está relacionada con la configuración entre varios tr. Cuando se configuran varios trs con valores de altura específicos, la altura de cada tr se asigna al valor de altura total en proporción al valor establecido. Tenga en cuenta que el valor de altura total se menciona aquí. Cuando varios trs no establecen un valor de altura específico, el valor de altura total se distribuye uniformemente. Cuando algunos TR tienen valores específicos establecidos y otros no establecen valores específicos como predeterminados, primero asegúrese de las necesidades básicas de cada TR, y luego satisfaga el resto de los TR con valores específicos establecidos, y luego todos los TR sin valores específicos establecidos tr. En el último caso, también debemos considerar la situación en la que el ancho total no es suficiente para el valor de configuración total de tr. Si no es suficiente, debe satisfacer las necesidades básicas de tr. La altura de la mesa será automática. extendido aquí. Luego considere tr con altura establecida y finalmente considere tr sin altura establecida.

3. La configuración de ancho y alto y sus funciones en la etiqueta td : Tanto el ancho como el alto en la etiqueta td son efectivos. Primero veamos el ancho de TD. El ancho de un determinado TD está relacionado con el ancho de cada TD en la columna. El ancho más grande se toma como el ancho de cada TD en esta columna. Donde, debe comprender el ancho de un determinado TD desde una perspectiva global. No puede determinar su ancho a partir de la configuración de ancho de este. Una vez que determinemos el ancho de cada columna, las cosas serán más fáciles de manejar. En este momento, la distribución del ancho entre cada TD se basa en la regla de distribución de altura de cada tr en el segundo artículo. La única diferencia es que, de forma predeterminada, el ancho de cada TD no se distribuye equitativamente, sino en proporción a su tamaño real. distribuir el contenido. Echemos un vistazo a la configuración de altura de td. Esto es relativamente simple. Sin embargo, la altura de cada td depende de la altura máxima de la fila donde se encuentra el td para determinar la altura de cada td en esta fila. de cada fila está determinada por tr. El principio de asignación de altura es el mismo. Otra cosa a tener en cuenta es la relación entre la altura de td y la altura de tr. En primer lugar, debe basarse en las necesidades del contenido. Sobre esta base, se determinará en función del valor establecido. Se utilizará el valor de configuración que sea mayor si uno tiene un valor establecido y el otro no. un valor establecido, entonces se utilizará el valor establecido.

1. Utilice métodos tradicionales

 <ancho de tabla=400> <tr> <td ancho=100></td> <td ancho=100></td> <td ancho=100></td> <td ancho=100></td> < /tr> <tabla>

2. Usa css

 <estilo>.td{ancho:100px;}</estilo><ancho de tabla=400> <tr> <td clase=td></td> <td clase=td></td> <td clase=td> </td> <td clase=td></td> </tr> <tabla>

El posible problema con los dos métodos anteriores es que si el contenido excede la configuración, por ejemplo, el ancho de la imagen es mayor que 100, se expandirá naturalmente y ajustará automáticamente el ancho de la tabla.

3. Usa css

 <estilo>.td{ancho:100px;overflow:hidden}</estilo><table width=400> <tr> <td class=td></td> <td class=td></td> <td clase =td></td> <td clase=td></td> </tr> <tabla>

Con este método, puede ocultar la parte sobrante. Si necesita un control estricto, puede usar este método. Si configura el valor del atributo de desbordamiento en desplazamiento o automático, puede usar este método. o automático, puede usar este método si configura el valor del atributo de desbordamiento en desplazamiento o automático, puede usar este método. Si está configurado en desplazamiento o automático, puede usar la barra de desplazamiento para ajustar cuando excede...

El anterior es el método para configurar el ancho y el alto de las celdas de la tabla HTML que le presenta el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá. tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!