我需要帮助这个项目,我正在工作,我似乎找不出为什么我的代码不起作用。我的目标是显示一个与此类似的加法表:

到目前为止,我对这个表的代码是:
<!DOCTYPE html>
<html>
<body>
<?php
$cols = 10;
$rows = 10;
?>
<?php echo "<table border=\"1\">";
<?php echo "<table>";
for($a = 1; $a < $rows;$a++)
echo'<tr>';
for($b = 1;$b < $cols; $b++);
echo '<td>'($answer = $a + $b); '</td>'
echo"</table>";
?>
<br>
</body>
</html>发布于 2022-09-29 17:01:54
有一堆排字和遗漏。最糟糕的是缺失的分号或外来的分号。
下面是使用数组符号https://onlinephp.io/c/a97d8的工作代码
<?php
$cols = 10;
$rows = 12;
$table[]="<table><tbody><tr><td>+</td>";
for($a = 1; $a < $rows;$a++) {
$table[] = "<td>$a</td>";
for($b = 1;$b < $cols; $b++) $table[]= "<td>".($answer = $a + $b)."</td>";
if ($a<$rows-1) {
$table[] = "</tr>";
$table[] = "<tr><td>$a</td>";
}
}
$table[] = "</tr></tbody></table>";
echo implode($table);
?>输出
注意CSS -它相当复杂。
table tr:nth-of-type(2n+3):从第三行开始的条纹
table {
border-collapse: collapse;
font-weight: bold;
color: blue;
font-family: Arial, Helvetica, sans-serif;
}
table td {
border: 1px solid #ccc;
width: 2em;
padding: 5px;
text-align: center;
}
table tr:first-of-type {
background-color: gold;
color: black;
}
table tr td:first-child {
background-color: pink;
color: black;
}
table tr:first-child>td:first-child {
background-color: orange;
}
table tr:nth-of-type(2n+3) {
background-color: #f2f2f2;
}<table>
<tbody>
<tr>
<td>+</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
发布于 2022-09-29 19:53:38
最简单的方法是使用PHP和CSS Grid:
https://paiza.io/projects/oHTe6JJGbeXX85Hij6X0VQ?language=php
<div class="table">
<?php
$rows = 10;
$cols = 10;
for($i=0; $i<$rows+1; $i++)
{
for($j=0; $j<$cols+1; $j++)
{
echo "<div>";
echo $i == 0 && $j == 0 ? "+" : $i + $j;
echo "</div>";
}
}
?>
</div>结果:
.table {
display: grid;
grid-template-columns: repeat(11, 1fr);
}
.table > div {
font-family:sans-serif;
padding: 5px 5px;
border: solid 1px;
text-align: center;
}
.table > div:first-child {
background-color: orange;
}
.table > div:nth-child(11n + 12) {
background-color: pink;
}
.table > div:nth-child(n+2):nth-child(-n+11) {
background-color: goldenrod;
}<div class="table">
<div>+</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div></div>
https://stackoverflow.com/questions/73899105
复制相似问题