2

quisiera agregar este formato de tabla en css

.datagrid table { 
 border-collapse:collapse; 
 text-align: 
 left; 
 width: 100%; 
}

.datagrid {
 font: normal 12px/150% Arial, Helvetica, sans-serif; 
 background: #fff; 
overflow: hidden; 
 border: 1px solid #006699;
}

.datagrid table td, .datagrid table th { padding: 3px 0px; }

.datagrid table thead th {
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
 background-color:#006699; 
 color:#FFFFFF; 
 font-size: 15px; 
 font-weight: bold; 
 border-left: 1px solid #0070A8; 
} 

.datagrid table thead th:first-child { border: none; }

.datagrid table tbody td { 
 color: #00496B; 
 border-left: 1px solid #E1EEF4;
 font-size: 12px;
 font-weight: normal; 
}

.datagrid table tbody .alt td { 
 background: #E1EEF4; 
 color: #00496B; 
}

.datagrid table tbody td:first-child { border-left: none; }
.datagrid table tbody tr:last-child td { border-bottom: none; }

en este script en php

 <?php
ini_set('max_execution_time', 300); 



//connect to database
if (!$link = @odbc_connect("Driver={SQL Server};Server=ip;", 'name', 'pass'))
    die ("Couln't connect to Database.");


//output HTML
echo '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
        <title>Título</title>
        <link rel="stylesheet" type="text/css" href="">
      </head>
      <body>
        <script type="text/javascript" src="wz_tooltip.js"></script>
        <right>';


//output table header
echo '<table border="0" cellspacing="5" cellpadding="9">
<body bgcolor="white" text="black">
                <table border="2">
        <tr>
            <th>Columna1</th>
            <th>Columna2</th>
        </tr>';

//sql query
$sql = "sql script";
$res = odbc_exec($link, $sql);
while($row = odbc_fetch_array($res)) 

    { 
echo "<tr>"; 
echo "<td>". $row['col1'] ."</td><td>". $row['col2'] ."</td>"; 
echo "</tr>"; 
} 
echo "</table></center>";

?>

¿Cómo podría hacer?

2
  • 2
    Hola Noclist, bienvenido a Stack Overflow en español. Por favor, lee el recorrido de bienvenida para aprender el funcionamiento básico del sitio. Lo más importante es haberlo intentado. Sobre tu intento nos contextualizas en los problemas concretos que tienes y sobre ello podemos ayudarte. Si no lo has intentado, investiga y prueba. Después has de editar la pregunta para añadir la informacion que falta segun Cómo preguntar y ejemplo mínimo verificable. Un saludo.
    – lois6b
    Commented el 3 abr. 2018 a las 9:11
  • 1
    Deberías ser un poco más específico, según he entendido, para resolver tu pregunta no hace falta hacer uso de PHP se reduce a un problema de aplicación de formatos a una tabla. Aún así me asalta una duda, ¿has podido crear este CSS sin saber aplicarlo? por favor, mejora tu pregunta para que podamos ayudarte. ¿qué resultado esperas? ¿qué has intentado?¿qué resultado has obtenido? un saludo.
    – ErnestoRM
    Commented el 3 abr. 2018 a las 9:47

3 respuestas 3

3

Una aclaración importante, no le estas declarando los estilos a PHP, los estilos solo se declaran en etiquetas HTML; aquí lo que ocurre es que estas mandando imprimir con una instrucción PHP la de echo; toda una estructura HTML

Dado que estas imprimiendo HTML a través de la función echo de PHP, lo único que debes hacer es declarar la llamada a tu CSS normal; es decir debería quedar del siguiente modo:

<?php
echo '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
        <title>Título</title>
        <link rel="stylesheet" type="text/css" href="estilos.css"><!--Aqui mando llamar los estilos-->
      </head>
      <body>
        <script type="text/javascript" src="wz_tooltip.js"></script>
        <right>';


//output table header
echo '<table border="0" cellspacing="5" cellpadding="9">
<body bgcolor="white" text="black">
                <table border="2">
        <tr>
            <th>Columna1</th>
            <th>Columna2</th>
        </tr>';



?>

Como puedes notar en el href, mando llamar al archivo de estilos llamado estilos.css no afecta en nada que el HTML lo estes produciendo desde PHP.

Entonces ¿qué deberías hacer para el caso de que quieras insertar ese estilo de tablas?

Idealmente para mantener el orden, declara un archivo con extensión .css que contendrá dichos estilos, guaradalo si gustas al mismo nivel que tu .php y después con la etiqueta link rel mandalo llamar como hice en el ejemplo

¿Cómo hago que esos estilos se apliquen en mi tabla y los tome?

Cuando la quieres aplicar un estilo a un elemento HTML; puedes hacerlo de las formas siguiente:

1. Declararle un id o una clase al HTML especifico y declarar los estilos en el archivo .css

Ejemplo

<div id="saludo">Hola Mundo</div>
 <!--Ahora dentro de los estilos hago lo siguiente-->

#saludo{
  background-color: red;
} 

Ejemplo 2:

<div class="varios">Saludos<div/>

    .varios{
          background-color: red;
        }

La única diferencia entre usar un id o una clase es que si es id los estilos declarados solo se aplicarán al elemento HTML que lo tenga declarado; en cambio si es una clase se aplicarán dichos estilos a todos los elementos HTML que tendgan declarada dicha clase

1

Puedes incluir un enlace a tu archivo .css o incluir los estilos directamente en el head, como te pongo a continuación:

<?php
ini_set('max_execution_time', 300);



//connect to database
if (!$link = @odbc_connect("Driver={SQL Server};Server=ip;", 'name', 'pass'))
    die("Couln't connect to Database.");


//output HTML
echo '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
        <title>Título</title>
        <-- puedes incluir un link a tu hoja de estilos aquí -->
        <link rel="stylesheet" type="text/css" href="">
        <!-- o crear estilos aquí -->
        <style>
          .datagrid table { border-collapse: collapse; text-align: left; width: 100%; }
          .datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
          .datagrid table td, .datagrid table th { padding: 3px 0px; }
          .datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#006699\', endColorstr=\'#00557F\');background-color:#006699; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 1px solid #0070A8; }
          .datagrid table thead th:first-child { border: none; }
          .datagrid table tbody td { color: #00496B; border-left: 1px solid #E1EEF4;font-size: 12px;font-weight: normal; }
          .datagrid table tbody .alt td { background: #E1EEF4; color: #00496B; }
          .datagrid table tbody td:first-child { border-left: none; }.datagrid table tbody tr:last-child td { border-bottom: none; }
        </style>
      </head>
      <body>
        <script type="text/javascript" src="wz_tooltip.js"></script>
        <right>';


//output table header
echo '<table border="0" cellspacing="5" cellpadding="9">
<!-- la etiqueta body solo puede estar 1 vez en todo el documento y nunca dentro de otras etiquetas html como table -->
<body bgcolor="white" text="black">
                <table border="2">
        <tr>
            <th>Columna1</th>
            <th>Columna2</th>
        </tr>';

//sql query
$sql = "sql script";
$res = odbc_exec($link, $sql);
while ($row = odbc_fetch_array($res)) {
    echo "<tr>";
    echo "<td>" . $row['col1'] . "</td><td>" . $row['col2'] . "</td>";
    echo "</tr>";
}
echo "</table></center>";

?>

Ten cuidado con los caracteres escapados dentro del echo. Ejemplo:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#006699\', endColorstr=\'#00557F\');

También te pongo unos comentarios sobre el uso que estás haciendo de la etiqueta . Más info aquí: https://developer.mozilla.org/es/docs/Web/HTML/Elemento/body

Un saludo!

0

Es muy fácil, creo que debes repasar más sobre qué es css y cómo se aplica.

Opción 1

  1. Copia y pega el código CSS, en un archivo aparte y nombralo (por poner un ejemplo) como: 'table-format.css'.
  2. Modifica esta linea en PHP: <link rel="stylesheet" type="text/css" href=""> por esta otra: <link rel="stylesheet" type="text/css" href="table-format.css">

Y ya.

Opción 2:

Si ya tienes una hoja de estilos creada, siempre puedes añadir todo ese código CSS, al final de esa hoja de estilos.

Opción 3:

Y otra alternativa es que en el código PHP, antes del cierre de la etiqueta head (está: </head>), abras una etiqueta <style></style> y dentro de ella, añadas el CSS.


Cualquiera opción anterior es válida, pero depende mucho de como estes estructurando tu página, porque en un principio lo mejor es que en el PHP no mezcles el formato CSS de la forma en que quieres, sino vincularlo a una hoja de estilos externas, a menos que sean estilos inline y obviamente es una excepción que se puede evitar en la gran mayoría de casos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.