Как уже упоминалось, не используйте document.write.Создайте элементы в памяти, а затем добавьте их в DOM, когда будете готовы.
Что касается height и width ;1) установить встроенный стиль td s или 2) применить высоту и ширину CSS.
Убедитесь, что везде, где вы устанавливаете размеры, сделайте его таким же, как на изображениях выше. Вариант # 2 является предпочтительным подходом.
Вариант # 1
function el( tagName ) {
return document.createElement( tagName );
}
var rows = 5;
var cols = 10;
var table = el( 'table' );
for ( var i = 0; i < rows; i++ ) {
var tr = el( 'tr' );
for ( var j = 0; j < cols; j++ ) {
var td = el( 'td' );
td.style.width = '20px';
td.style.height = '20px';
tr.appendChild( td );
}
table.appendChild( tr );
}
document.body.appendChild( table );
td {
border: 1px solid #ccc;
}
Опция # 2
function el( tagName ) {
return document.createElement( tagName );
}
var rows = 5;
var cols = 10;
var table = el( 'table' );
for ( var i = 0; i < rows; i++ ) {
var tr = el( 'tr' );
for ( var j = 0; j < cols; j++ ) {
tr.appendChild( el( 'td' ) );
}
table.appendChild( tr );
}
document.body.appendChild( table );
td {
border: 1px solid #ccc;
width: 20px;
height: 20px;
}