Cómo tener una tabla HTML con un borde alrededor, pero no alrededor de las filas

Aunque las etiquetas de tabla HTML pueden tener un atributo de "frontera", este atributo sólo se aplica a toda la tabla y añadirá bordes alrededor de todas las celdas de la tabla también. Desde el atributo frontera se considera obsoleto de todos modos, utilizar hojas de estilo en cascada código (CSS) para definir estilos de borde para cualquier parte de su mesa basado en HTML.

Instrucciones

1

Abra el archivo HTML que contiene la tabla en el texto plano o editor de código de su elección. Los buenos programas incluyen Notepad ++, BBedit y jEdit, pero el viejo recurso del Bloc de notas de Windows funciona así.

2

Localice las etiquetas de tabla en el archivo HTML. Todas las tablas comienzan con la etiqueta <table> y terminan con la etiqueta </ ​​table> etiqueta. Entre estas etiquetas, <thead> define la sección de encabezado, <tbody> define el cuerpo de la tabla y <tr> etiquetas definen filas. Datos célula individual se envuelve en <td> y </ td> etiquetas. Estas etiquetas no son demasiado importantes aquí, sin embargo, ya que sólo se necesita establecer un estilo para la etiqueta <table>.

3

Añadir <style> y </ style> etiquetas dentro de las etiquetas <head> del archivo HTML. Dentro de estas etiquetas, escriba el siguiente regla de estilo CSS: mesa {border: 1px negro sólido;}. Esta norma establece que todas las tablas de la página web Cómo uno píxeles de ancho frontera, sólido negro. Switch "negro" en el ejemplo dado a cualquier color con nombre (de los 256 colores "seguros para la Web") o el código hexadecimal del color, que se puede obtener mediante un selector de color. Estilos de borde disponibles incluyen sólidos, puntos, guiones, dobles, surco, cresta, inserción y principio.

4

Añadir una nueva regla de estilo con el mismo código, pero cambiar la palabra "mesa" a cualquier otra tabla de variables que desea orientar su campaña. Para agregar bordes a sólo las filas, por ejemplo, "mesa" cambio "tr" en el ejemplo.

5

Editar etiqueta de tabla de su archivo HTML para leer "<table id = 'tu-id-nombre"> "para dar a su mesa un ID. Para apuntar sólo eso tabla específica en el código CSS, cambiar la palabra "mesa" en el ejemplo de código CSS para "# su-id-name". Añadir una clase en lugar de una identificación a la mesa si quiere dirigirse a un grupo de tablas en su lugar. En CSS, delante del nombre de la clase con un punto en lugar del símbolo de hash.

Consejos y advertencias

  • Como soporte de los navegadores para el estilo CSS3 gobierna aumenta, puede probar a usar nuevas propiedades fronterizas como la frontera de radio y de la frontera-imagen. Por el momento, sin embargo, no todos los navegadores soportan estos.
  • Retire atributos obsoletas de "frontera" o "cellpadding" de etiquetas de tabla HTML. Estos interfieren con estilos CSS y no hagan de una manera predecible en todos los navegadores.