要實現帶邊框的九九乘法表,你可以使用HTML和CSS來創建表格,并使用JavaScript來生成九九乘法表的內容。
首先,創建一個HTML文件,并添加一個空的<table>
元素作為容器。然后,在CSS中設置表格的樣式,包括邊框和邊距。
HTML代碼:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table id="multiplication-table"></table>
<script src="script.js"></script>
</body>
</html>
CSS代碼(style.css):
table {
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid black;
padding: 10px;
}
接下來,在JavaScript文件中(script.js),使用一個循環來生成九九乘法表的內容,并將其添加到表格中。
JavaScript代碼(script.js):
var table = document.getElementById("multiplication-table");
for (var i = 1; i <= 9; i++) {
var row = document.createElement("tr");
for (var j = 1; j <= 9; j++) {
var cell = document.createElement("td");
cell.textContent = i + " × " + j + " = " + (i * j);
row.appendChild(cell);
}
table.appendChild(row);
}
以上代碼將生成一個帶有邊框的九九乘法表,并將其顯示在網頁中。你可以根據需要修改CSS樣式來調整表格的外觀。