如何为行标题和列标题创建单元格

Question

请考虑这张图片：

如何使用CSS和HTML创建带有对角线的黄色单元格？

谢谢

Answer 1

使用background-image: linear-gradient()至table th:last-child并设置跨度中的每个文本并将其样式设置为bwlow：

td, th {
    border: 1px solid black;
    text-align: left;
    padding: 8px;
}
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
table th:last-child {
  background-image: linear-gradient(
    to top left,
    yellow 48%,
    black,
    yellow 52%
  );
}
.col{
    float: right;
    margin-top: 7px;
}

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th><span class="row">row</span><span class="col">col</span></th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Answer 2

td, th { border: 1px solid black; text-align: left; padding: 8px; } 
table { font-family: arial, sans-serif; border-collapse: collapse; ; } 
table th:last-child { background-image: linear-gradient( to top left, yellow 48%, black, yellow 52% ); } 
.col{ float: right; margin-top: 7px; }

<table> 
<tr>  
<th>
<span class="headrow">row</span>
<span class="headcol">col</span>
</th> 
</tr> 
</table>