Как разместить что-то вроде сидений в кинозале

Я хотел бы спроектировать что-то вроде показанного ниже. Как я должен это сделать в html / css. Должен ли я использовать таблицу или flex, было бы лучше или что-то еще?

Художественный зал

html,css,

1

Ответов: 2


1

В то время как вопросы такого стиля, как правило, вызывают мнения, основанные на мнениях, и как таковые недовольны, я считаю законным запрашивать мнения экспертов о том, как решить определенную проблему, прежде чем начать инвестировать эту работу.

Теперь, ни в коем случае, я не специалист по html. Но, хотя в вопросе не упоминается, мне кажется, что это может быть представление информации о статусе в веб-приложении, а не статический HTML-документ. Возможно, в контексте это необходимо, есть веб-сайт или некоторое обновление на основе таймера на странице. И данные о распределении мест могут поступать с сервера.

В описанном выше сценарии один из способов сделать это без таблицы может быть таким, как показано ниже. С холстом (который позволяет довольно рендеринга, если достаточно времени вложен) и с помощью функции 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>

Поскольку это приблизительный подход к кости, не следует оставлять без внимания, что существуют веб-фреймворки (например, угловые, node.js, ...), которые могут решить одну и ту же проблему в гораздо меньшем числе строк кода.

Не в последнюю очередь, мои извинения для всех тех, кто на самом деле является html-экспертами, и считаю мой стиль кодирования ужасным;)


0

Используйте таблицу, например:

.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>

Вы также можете увидеть представленную таблицу здесь

HTML, CSS,
Похожие вопросы