Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Podział strony na 2 kolumny
Forum PHP.pl > Forum > Po stronie przeglądarki
czezz
7.07.2011, 09:34:42
Wyświetlam w przeglądarce, dane pobrane z bazy, używając następującego kodu:
[PHP] pobierz, plaintext 
  1. <?php
  2. include("conn.php");
  3.  
  4. $query = "
  5. SELECT
  6. alarmseverity, alarmstarttime, alarmendtime, plnamn, hvnamn, servicename, alarmactualscore, alarmpossiblescore
  7. FROM monitoring_alarm
  8. ORDER BY alarmstarttime DESC limit 0,50";
  9.  
  10. $result = mysql_query($query);
  11. if (($result)||(mysql_errno == 0))
  12. {
  13.   echo "<table font size="-2" width='100%'><tr>" ;
  14.   if (mysql_num_rows($result)>0)
  15.   {
  16.           //loop thru the field names to print the correct headers
  17.           $i = 0;
  18.           while ($i < mysql_num_fields($result))
  19.           {
  20.        echo "<th>". mysql_field_name($result, $i) . "</th>";
  21.        $i++;
  22.     }
  23.     echo "</tr>";
  24.  
  25.     //display the data
  26.     while ($rows = mysql_fetch_array($result,MYSQL_ASSOC))
  27.     {
  28.       echo "<tr>";
  29.       foreach ($rows as $data)
  30.       {
  31.         echo "<td align='center'>". $data . "</td>";
  32.       }
  33.     }
  34.   }else{
  35.     echo "<tr><td colspan='" . ($i+1) . "'>No Results found!</td></tr>";
  36.   }
  37.   echo "</table>";
  38. }else{
  39.   echo "Error in running query :". mysql_error();
  40. }
  41. ?>
[PHP] pobierz, plaintext


Dane elegancko wyświetlają się w oknie przeglądarki.
Jednak to co chciałbym osiągnąć, to podzielić tą stronę na 2 kolumny i kilka rządów. W ten sposób chcę uzyskać kilka okien w przeglądarce i w każdym z nich wyświetlać inne zapytanie SQL.

Dla zaobrazowania sprawy zrobiłem JPEG'a:
http://imageshack.us/photo/my-images/26/45145931.jpg/

Chcę aby to było możliwie najprostsze/lekkie rozwiązania.
Wciąż próbuję walczyć z rozmiarem tabeli ale cały czas mi sie rozwala wszystko na ekranie.
Czy ktoś może mi pomóc/podpowiedzieć ?
askone
7.07.2011, 10:08:32
Powinno pomóc umieszczenie tabel w divach dla których dasz float: left.
czezz
7.07.2011, 10:17:43
W między czasie zrobiłem coś takiego. Jedyne czego mi brakuje to, żeby wyświetlany text mieścił się w tych tabelkach.
Jak mam użyć div'ów, o których piszesz ? 

[HTML] pobierz, plaintext 
  1. <head>
  2. <style type="text/css">
  3. .title
  4. {
  5. width:769px;
  6. height: 65px;
  7. margin:15px auto;
  8. }
  9. .left_side
  10. {
  11. float: left;
  12. margin: 20px 0 20px 0;
  13. padding: 0 0 25px 15px;
  14. width: 600px;
  15. border: 1px solid #CCCCCC;
  16. background-color: #FFFFFF;
  17. color: #000000;
  18. }
  19. .right_side
  20. {
  21. float:right;
  22. width: 600px;
  23. color: #000000;
  24. background-color: #FFFFFF;
  25. margin: 20px 0px 20px 0px;
  26. padding:0px 0px 25px 15px;
  27. border:1px solid #CCCCCC;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div class="title">Your Main title Here </div>
  33.  
  34. <div class="left_side">
  35. <p align="center"><b>System 1</b></p>
  36. <p>content</p>
  37.  
  38. <?php
  39. include("conn.php");
  40.  
  41. $query = "
  42. SELECT
  43. alarmseverity, alarmstarttime, alarmendtime, plnamn, hvnamn, servicename, alarmactualscore, alarmpossiblescore
  44. FROM monitoring_alarm
  45. ORDER BY alarmstarttime DESC limit 0,50";
  46.  
  47. $result = mysql_query($query);
  48. if (($result)||(mysql_errno == 0))
  49. {
  50. #  echo "<font size='-1'>";
  51. #  echo "<table width='100%'><tr>";
  52. echo "<table width='100%'><tr>";
  53.  
  54.   if (mysql_num_rows($result)>0)
  55.   {
  56.           //loop thru the field names to print the correct headers
  57.           $i = 0;
  58.           while ($i < mysql_num_fields($result))
  59.           {
  60.        echo "<th>". mysql_field_name($result, $i) . "</th>";
  61.        $i++;
  62.     }
  63.     echo "</tr>";
  64.  
  65.     //display the data
  66.     while ($rows = mysql_fetch_array($result,MYSQL_ASSOC))
  67.     {
  68.       echo "<tr>";
  69.       echo "<font size='-5'>";
  70.       foreach ($rows as $data)
  71.       {
  72.         echo "<td align='center'>". $data . "</td>";
  73.       }
  74.     }
  75.   }else{
  76.     echo "<tr><td colspan='" . ($i+1) . "'>No Results found!</td></tr>";
  77.   }
  78.   echo "</table>";
  79. }else{
  80.   echo "Error in running query :". mysql_error();
  81. }
  82. ?>
  83.  
  84.  
  85.  
  86. <br />
  87. </div>
  88.  
  89. <div class="right_side">
  90. <p align="center"><b>System 2</b></p>
  91. <p>content</p>
  92.  
  93.  
  94. <?php
  95. include("conn.php");
  96.  
  97. $query = "
  98. SELECT
  99. alarmseverity, alarmstarttime, alarmendtime, plnamn, hvnamn, servicename, alarmactualscore, alarmpossiblescore
  100. FROM monitoring_alarm
  101. ORDER BY alarmstarttime DESC limit 0,50";
  102.  
  103. $result = mysql_query($query);
  104. if (($result)||(mysql_errno == 0))
  105. {
  106. #  echo "<font size='-1'>";
  107. #  echo "<table width='100%'><tr>";
  108. echo "<table width='100%'><tr>";
  109.  
  110.   if (mysql_num_rows($result)>0)
  111.   {
  112.           //loop thru the field names to print the correct headers
  113.           $i = 0;
  114.           while ($i < mysql_num_fields($result))
  115.           {
  116.        echo "<th>". mysql_field_name($result, $i) . "</th>";
  117.        $i++;
  118.     }
  119.     echo "</tr>";
  120.  
  121.     //display the data
  122.     while ($rows = mysql_fetch_array($result,MYSQL_ASSOC))
  123.     {
  124.       echo "<tr>";
  125.       echo "<font size='-5'>";
  126.       foreach ($rows as $data)
  127.       {
  128.         echo "<td align='center'>". $data . "</td>";
  129.       }
  130.     }
  131.   }else{
  132.     echo "<tr><td colspan='" . ($i+1) . "'>No Results found!</td></tr>";
  133.   }
  134.   echo "</table>";
  135. }else{
  136.   echo "Error in running query :". mysql_error();
  137. }
  138. ?>
  139.  
  140.  
  141.  
  142. <br />
  143. </div>
  144. </body>
[HTML] pobierz, plaintext
askone
7.07.2011, 10:50:15
Nie mam jak sprawdzić, ale myślałem o takiej konstrukcji:
[HTML] pobierz, plaintext 
  1. <div id="container">
  2.  <div class="left">
  3.   <table>
  4.    ...
  5.   </table>
  6.  </div>
  7.  <div class="left">
  8.   <table>
  9.    ...
  10.   </table>
  11.  </div>
  12.  <div class="left">
  13.   <table>
  14.    ...
  15.   </table>
  16.  </div>
  17.  <div class="left">
  18.   <table>
  19.    ...
  20.   </table>
  21.  </div>
  22. </div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. #container {
  2.  width: 996px;
  3.  margin: 0 auto;
  4. }
  5. .left {
  6.  float: left;
  7. }
[CSS] pobierz, plaintext



Style dla tabel ustaw według własnego uznania.
czezz
7.07.2011, 12:50:05
W miejsce kropek wstawiłem cały kod PHP, który załączyłem w pierwszsym poście.
Dane są wyświetlane, ale tylko w jednej kolumnie. Nie mam podziału ekranu na pół sad.gif

Co mam zrobić z tym kodem CSS ? Dołączyłem go na początku pliku, ale to chyba nie oto chodzi ?


UPDATE:
Mniej więcej to co chiałem uzyskałem tą metodą
W miejsce "Table CellX.Y" wstawiłem cały kod PHP
[HTML] pobierz, plaintext 
  1. <table border="1" bordercolor="#FFFFFF" style="background-color:#FFFFCC" width="100%" cellpadding="-1" cellspacing="-1">
  2.         <tr>
  3.                 <td>Table Cell1.1</td>
  4.                 <td>Table Cell2.1</td>
  5.         </tr>
  6.         <tr>
  7.                 <td>Table Cell1.2/td>
  8.                 <td>Table Cell2.2</td>
  9.         </tr>
  10.         <tr>
  11.                 <td>Table Cell1.3</td>
  12.                 <td>Table Cell2.3</td>
  13.         </tr>
  14. </table>
[HTML] pobierz, plaintext


Podejrzewam, że są lepsze sposoby aby uzyskać ładniejszy rezultat.
askone
7.07.2011, 13:55:06
Cytat(czezz @ 7.07.2011, 13:50:05 ) *
W miejsce kropek wstawiłem cały kod PHP, który załączyłem w pierwszsym poście.
Dane są wyświetlane, ale tylko w jednej kolumnie. Nie mam podziału ekranu na pół sad.gif


Skoro masz dane w jednej kolumnie to pewnie z powodu braku deklaracji szerokości tabeli lub div. Musisz jawnie określić szerokość div na powiedzmy 480px. Wtedy dla table dajesz 100% - dzięki czemu wypełnia on całą szerokość diva. Ponieważ container ma szerokość 996px to powinny w nim zmieścić się 2 div-y o szerokości 480px.

Pozdrawiam
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.