シネマホールの座席のようにレイアウトする方法

私は下に示すようなものをデザインしたいと思います.html/cssでレイアウトする必要があります。テーブルやフレックスを使用するとよいでしょうか？シネマホールの座席のようにレイアウトする方法

2016-10-13 john doe

ないHTMLの専門家だが...私の最初の試みは、おそらくその後、HTML、2Dキャンバスととなりますjavascriptを使って四角形のグリッドをレンダリングします。この関数は、各座席（行、列）の座席ステータス（空白、緑、赤）を得るルックアップテーブルを入力として持つことができます。 – BitTickler

あなたはすでに何をしようとしましたか？ – Jhecht

テーブルまたはフレックスのいずれかが機能します。そして、私はあなたがこのようにしなければならないような質問をするべきではないと思っています...それはSOのためではなく、意見ベースの質問です。問題があれば、何かをして特定の質問をしてみてください。 – Hp93

-2

使用テーブル、次のように：このスタイルの質問は意見ベースを生成する傾向があるが

.table tbody tr td:not(:first-child) { 
 
    border: 1px solid blue; 
 
    width: 1em; 
 
    height:1em; 
 
} 
 

 
.table tbody tr td:first-child { 
 
    font-weight:bold; 
 
} 
 

 
.table tr td:nth-child(5) { 
 
    border:none!important; 
 
} 
 

 
.table { 
 
    border-spacing: 3em; 
 
}

<table class="table"> 
 
<thead> 
 
    <tr> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    <td></td> 
 
    <td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
    <td>A</td> 
 
    <td style="background-color:red;"></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td style="background-color:red;"></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>B</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td style="background-color:red;"></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>C</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>D</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td style="background-color:blue;"></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td style="background-color:blue;"></td> 
 
    </tr> 
 
</tbody> 
 
</table>

あなたはまた、レンダリングされたテーブルhere

出典

2016-10-13 02:59:08

を見ることができます私はそれを正当なものと考えています。自分が仕事に投資する前に特定の問題に取り組む方法に関する専門家の意見を聞く。

今、私はhtmlの専門家ではありません。しかし、質問には言及されていませんが、私は静的なHTML文書ではなくWebアプリケーションに状態情報を表示することができると思います。コンテキスト内でこれが必要なのかもしれません。WebSocketや、関連するページのタイマーベースの更新があります。そして、座席割り当てデータはサーバから来るかもしれません。

上記のシナリオでは、テーブルなしでそれを行う1つの方法は以下のようになります。キャンバス（かなりの時間が費やされていればかなりのレンダリングが可能）とjavascript関数を使って、どこかからスクリプトに入ってくるデータを使っています。このアプローチは、HTMLテーブルベースのソリューションに好適であるかどうか

に降りてくるかもしれません：

はどのようにきれいな絵があることになっていますか？
迷惑な仕事は何ですか？ htmlテーブルにスクリプトを埋め込むか、またはキャンバス画像をスクリプトでレンダリングするのですか？ここで

このアプローチを示す小さなプロトタイプ：

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Demo of a canvas used to render seat plan in a Cinema</title> 
 
     <script> 
 
      var EMPTY = 0; // Still available for reservation and purchase. 
 
      var RESERVED = 1; // reserved but not yet paid for. 
 
      var BOUGHT = 2; // bought and paid for. 
 

 
      function Point(x,y) { 
 
       return { X: x, Y: y } 
 
      } 
 
      function Size(w,h) { 
 
       return {Width: w, Height: h} 
 
      } 
 
      function Rectangle(left,top,width,height) { 
 
       return {TopLeft: Point(left,top), Size: Size(width,height)} 
 
      } 
 
      function seatColorFromSeatStatus(seatStatus) { 
 
       switch(seatStatus) { 
 
        case EMPTY: return "white"; 
 
        case RESERVED: return "green"; 
 
        case BOUGHT: return "red"; 
 
        default: return "black"; // Invalid value... 
 
       } 
 
      } 
 
      function mapSeatStatusToSeatColor(seats) 
 
      { 
 
       var result = {}; 
 
       for(seat in seats) { 
 
        result[seat] = seatColorFromSeatStatus(seats[seat]) 
 
       } 
 
       return result; 
 
      } 
 
      function seatKeyFromPosition(row,col) { 
 
       return JSON.stringify([row,col]); 
 
      } 
 
      function seatRowFromKey(key) { 
 
       return (JSON.parse(key))[0]; 
 
      } 
 
      function seatColFromKey(key) { 
 
       return (JSON.parse(key)[1]); 
 
      } 
 
      function getSeatInfo(nrows,ncolumns) { 
 
       var result = { NRows: nrows, NColumns: ncolumns, Seats : {} }; 
 
       for(row = 0; row < nrows; row++) { 
 
        for(col = 0; col < ncolumns; col++) { 
 
         result.Seats[seatKeyFromPosition(row,col)] = EMPTY; 
 
        } 
 
       } 
 
       result.Seats[seatKeyFromPosition(0,0)] = RESERVED; 
 
       result.Seats[seatKeyFromPosition(1,3)] = BOUGHT; 
 
       return result; 
 
      } 
 
      function renderSeat(ctx,r,fillColor) { 
 
       var backup = ctx.fillStyle; 
 
       ctx.strokeStyle = "blue"; 
 
       ctx.rect(r.TopLeft.X+2,r.TopLeft.Y+2,r.Size.Width-4,r.Size.Height-4); 
 
       ctx.stroke(); 
 
       ctx.fillStyle = fillColor; 
 
       ctx.fillRect(r.TopLeft.X+3,r.TopLeft.Y+3,r.Size.Width-5,r.Size.Height-5); 
 
       ctx.fillStyle = backup; 
 
      } 
 
      function renderSeatplan(seatInfo) { 
 
       var nrows = seatInfo.NRows; 
 
       var ncolumns = seatInfo.NColumns; 
 
       var seatColors = mapSeatStatusToSeatColor(seatInfo.Seats) 
 
       var canvas = document.getElementById("seatplan"); 
 
       var ctx = canvas.getContext("2d"); 
 

 
       var borderWidth = 10; 
 
       var rcContent = Rectangle(
 
        borderWidth 
 
        , borderWidth 
 
        , canvas.width - 2 * borderWidth 
 
        , canvas.height - 2 * borderWidth 
 
       ); 
 
       var szCell = Size(
 
        Math.floor(rcContent.Size.Width/(ncolumns + 1)) 
 
        , Math.floor(rcContent.Size.Height/(nrows + 1)) 
 
       ); 
 
       ctx.font = "30px Arial"; 
 

 
       for(row = -1; row < nrows; row++) { 
 
        for(col = -1; col < ncolumns; col++) { 
 
         var r = Rectangle(
 
          rcContent.TopLeft.X + szCell.Width * (col+1) 
 
          ,rcContent.TopLeft.Y + szCell.Height * (row+1) 
 
          ,szCell.Width 
 
          ,szCell.Height 
 
          ); 
 
         var center = Point(szCell.Width/2, szCell.Height/2); 
 
         if (row == -1 && col == -1) { 
 
          // nothing to render. 
 
         } 
 
         else if(row == -1){ 
 
          // render column headers as numbers... 
 
          ctx.fillStyle = "black"; 
 
          ctx.textAlign = "center"; 
 
          ctx.fillText(col.toString(),r.TopLeft.X+center.X,r.TopLeft.Y+center.Y+6); 
 
         } 
 
         else if(col == -1){ 
 
          // render row header 
 
          ctx.fillStyle = "black"; 
 
          ctx.textAlign = "center"; 
 
          ctx.fillText(String.fromCharCode(65 + row),r.TopLeft.X+center.X+4,r.TopLeft.Y+center.Y+6); 
 
         } 
 
         else 
 
         { 
 
          // render seat 
 
          renderSeat(ctx,r,seatColors[seatKeyFromPosition(row,col)]); 
 
         } 
 
        } 
 
       } 
 
      } 
 
     </script> 
 
    </head> 
 
    <body onload="renderSeatplan(getSeatInfo(10,16));"> 
 
     <h1>Seatplan</h1> 
 
     <canvas id="seatplan" width="640" height="480"></canvas> 
 
    </body> 
 
</html>

これは裸の骨のアプローチであるとして、例えば、角度（Webフレームワークがあること、unmentioned残されてはなりません、node.js、...）、これははるかに少ないコード行で同じ問題を解決する可能性があります。

最終なく、少なくとも、実際にHTMLの専門家があり、ひどい私のコーディングスタイルを見つけるすべての人に私の謝罪;）

出典

2016-10-13 05:35:46 BitTickler

シネマホールの座席のようにレイアウトする方法

答えて

関連する問題