The syntax error is causing the next line to be ignored. No styles can applied whether external or embedded.
<title>Table Practice</title>
I tweaked your CSS…
table {
width: 50%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
text-align: center;
}
You should know that labels down the left side may be (and probably should, for the sake of semantics) declared as TH, not TD.
<tr>
<th>Alena</th>
<td>4</td>
<td>3</td>
<td>1</td>
</tr>
An empty element without an ID attribute should have at least one character,
<th></th>
and since it is not semantically a heading element, it should be a TD.
<td> </td>
That will give the element some dimensions and will not be spit out as a validation error.

Aside
Concerning the Table Heading (<th>
) element, it has a special attribute called scope
which defines the range it applies to, whether column or row.
<thead>
<tr>
<td> </td>
<th scope="col">Attack</th>
<th scope="col">Defense</th>
<th scope="col">Magic</th>
</tr>
</thead>
and,
<tr>
<th scope="row">Alena</th>
<td>4</td>
<td>3</td>
<td>1</td>
</tr>
Further aside
Content of the left side column should not be center aligned. Left alignment is easier to read and has a more consistent look and feel.
We can tweak the CSS a little more to achieve this:
table {
width: 50%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
text-align: center;
}
th[scope=row] {
padding-left: 0.5em;
text-align: left;
}
Resulting table…

Note the use of attribute selector
in the last selector rule?