Что самый легкий путь состоит в том, чтобы сделать огромной подобной шахматам сеткой?

Вы можете попробовать избавиться от таблицы, вместо этого позиционируя элементы с помощью CSS {position: relative; верх: 20 пикселей; left: 20px} и т. д. и нарисуйте повторяющуюся сетку заднего фона.

Вы можете построить таблицу, используя JavaScript для управления DOM. Если содержимое сетки очень регулярное, код для этого будет намного меньше, чем имеющий 400x400 раз плюс разметка. Конечно, производительность зависит от движка JavaScript. Но если это не совсем отстой, это может быть даже быстрее, чем анализ всего HTML, независимо от времени передачи по сети.

Я предлагаю разместить плитки абсолютно внутри доски, чтобы сэкономить на HTML (время передачи) и расчетах положения (время загрузки) браузером. JS для регистрации кликов и их обработки (меньше HTML = меньше времени передачи и загрузки).

Итак, у вас может быть этот базовый CSS:

#board {
  display: block;
  width: [BoardWidth]px; /* TileWidth * NumberOrColumns */
  height: [BoardHeight]px; /* TileHeight * NumberOfRows */
  position: relative;
}
.tile {
  display: block;
  width: [TileWidth]px;
  height: [TileHeight]px;
  float: left;
}

Затем создается HTML-код следующим образом:

<div id="board">
<div class="tile" style="position: absolute; left:0px; top:0px;"></div>
<div class="tile" style="position: absolute; left:20px; top:0px;"></div>
<div class="tile" style="position: absolute; left:40px; top:0px;"></div>
<div class="tile" style="position: absolute; left:60px; top:0px;"></div>
<div class="tile" style="position: absolute; left:0px; top:20px;"></div>
<div class="tile" style="position: absolute; left:20px; top:20px;"></div>
<div class="tile" style="position: absolute; left:40px; top:20px;"></div>
<div class="tile" style="position: absolute; left:60px; top:20px;"></div>
<div class="tile" style="position: absolute; left:0px; top:40px;"></div>
<!--(...)-->
</div>

В котором каждая плитка имеет позицию слева: [X * TileWidth] px; вверху: [Y * TileHeight] px; .
Это или предложение Дэвида М.

Вы также можете сократить время загрузки страницы, если уменьшите размер страницы - так, как предлагается, с помощью JQuery или другой платформы JavaScript для создания триггера для щелчка по каждому div будет быть идеальным .
Я не очень сообразителен, но при использовании JQuery это будет примерно так:

$(document).ready(function() {
  $(".tile").click(function() {
    // find out which square was clicked, and perhaps redirect to a page with get variables
  });
});

Удаление ссылок и обработка их с помощью события click в Javascript (желательно с помощью чего-то вроде JQuery) должны значительно сократить размер файла.

http://www.w3schools.com/TAGS/tag_map.asp

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

Если вы используете карту изображений для создания триггеров для своей клетчатой ​​доски, вы просто понадобится повторяющийся фон и прозрачное изображение, заполняющее всю высоту.

Вы можете построить его с помощью CSS с плавающей запятой, например, если квадраты имеют размер 20x20 пикселей:

<style type="text/css">
div.container {
width: Xpx; /* 20px [square box width]+1px [border width of each square])) * number of squares */
height: Xpx; /* similar to above] */
border: solid black;
border-width: 1px 0px 0px 1px;} /* North East South West */

div.square {
float: left;
width: 20px;
height: 20px;
border: solid black;
border-width: 0px 1px 1px 0px;}

div.row {
clear: both;}
</style>


<div class="container">
    <div class="row">
        <div class="square">
        </div>
        ...
    </div>
...
</div>

Не забудьте использовать IE с допустимым типом документа http: / /htmlhelp.com/tools/validator/doctype.html или использовать хаки блочной модели в режиме причуд [ http://tantek.com/CSS/Examples/boxmodelhack.html] .

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

Какой самый быстрый обычно сильно зависит от браузера, например Я не удивлюсь, если IE лучше работает с таблицами, в то время как другие браузеры лучше работают с относительными DIV / float.

(Я не тестировал вышеупомянутое, но что-то подобное должно работать.)

Затем вы можете преобразовать приведенное выше в JavaScript, чтобы уменьшить время загрузки страницы, например:

function GenHTML(NumRows, NumCols) {
    var LRows = []
    for (var x=0; x<NumRows; x++) {
        var LCols = []
        for (var y=0; y<NumCols; y++) {
            var HTML = '<div class="square"></div>'
            LCols.push(HTML)}

        LRows.push('<div class="row">'+ LCols.join('') +'</div>')}
    return LRows.join('')}

function SetHTML(NumRows, NumCols) {
    document.getElementById('container').innerHTML = GenHTML(NumRows, NumCols)}