2011-08-21 11 views
1

人の名前を含むMySQLテーブルがあります。 PHPを使用すると、これらの名前を3つの列に分けて表示する最も良い方法は何でしょうか。3つの列にデータを分割

これはHTMLテーブルを使用して実現できますが、これは<div>のものだけを使用して行うことができますか?

これは%演算子を使って行うことができると聞きました。これが最善の方法だろうか、これはどのように行われるのだろうか?

+0

名前の形式はどのようなものですか、どのように分割したいですか? – DaveRandom

+7

答えを受け入れると考えたことはありますか? –

+2

表形式のデータを扱うときに '

' sに何も問題はありません、あなたは知っています... – DaveRandom

答えて

8

モジュラス演算子を使用してこれを行うことができますが、実際にはCSSだけで可能です。

display: inline-blockを使用すると、良好な列効果を得ることができます。 this JSFiddle hereをご覧ください。私は怠け者なのでJavaScriptのみを使用しています。あなたのケースでPHPによって<div>のリストが生成されます。特定の幅に限定したい場合は、固定幅のコンテナ<div>に入れてください。


私は実際にあなたがしなければならない(あなたは特別なユースケースを与えていない)テーブルを使用したソリューションを考え出しました。コードは以下の通りで、デモの作業はhereです。

$columns = 4;  // The number of columns you want. 

echo "<table>";  // Open the table 

// Main printing loop. change `30` to however many pieces of data you have 
for($i = 0; $i < 30; $i++) 
{ 
    // If we've reached the end of a row, close it and start another 
    if(!($i % $columns)) 
    { 
     if($i > 0) 
     { 
      echo "</tr>";  // Close the row above this if it's not the first row 
     } 

     echo "<tr>"; // Start a new row 
    } 

    echo "<td>Cell</td>";  // Add a cell and your content 
} 

// Close the last row, and the table 
echo "</tr> 
</table>"; 

とオフを終了する、私たちは、この時間は戻ってdiv秒に行く、私たちのコラム中心のレイアウトを持っています。ここにいくつかのCSSがあります。これは、別のファイルに入れてくださいは、インラインを残していません。

<?php 
$rows = 10;  // The number of columns you want. 
$numItems = 30;  // Number of rows in each column 

// Open the first div. PLEASE put the CSS in a .css file; inline used for brevity 
echo "<div style=\"width: 150px; display: inline-block\">"; 

// Main printing loop. 
for($i = 0; $i < $numItems; $i++) 
{ 
    // If we've reached our last row, move over to a new div 
    if(!($i % $rows) && $i > 0) 
    { 
     echo "</div><div style=\"width: 150px; display: inline-block\">"; 
    } 

    echo "<div>Cell $i</div>";  // Add a cell and your content 
} 

// Close the last div 
echo "</div>"; 
?> 
+0

ありがとうございます。理想的には、PHPとモジュラス演算子を使用してこれを行うことをお勧めします。各列に含める項目の数を定義できるため、データが次の列に挿入されるタイミングを指定できるようになります。 これを実行する方法についていくつかのガイダンスを提出できますか? – user826855

+0

@ user826855上記の私の編集をご覧ください。コードはかなり自己説明的でなければなりません(私は願っています)。まだ質問がある場合は、尋ねることを恐れないでください。 – Bojangles

+0

優秀!ありがとうございました。それは他の方法でそれを行うことが可能ですか?むしろ行(水平)で塗りつぶします。列(垂直)で行うことは可能ですか? – user826855

関連する問題