Tables

by Slavenzka

HTML

<!DOCTYPE html>
<html lang="ru">

  <head>
    <meta charset="utf-8">
    <meta name="keywords" content="tables, html, formatting">
    <title>Таблицы в html</title>
  </head>
  
  <body>
    <table>
      <caption>Заголовок таблицы</caption>
      <tr>
        <th>Столбец 1</th>
        <th>Столбец 2</th>
        <th>Столбец 3</th>
      <tr>
      <tr>
        <td colspan="2" rowspan="2">Ячейка 1-1</td>
        <td>Ячейка 1-3</td>
      </tr>
      <tr>
        <td>Ячейка 2-3</td>
      </tr>
      <tr>
        <td>Ячейка 3-1</td>
        <td>Ячейка 3-2</td>
        <td>Ячейка 3-3</td>
      </tr>
    </table>
  </body>


</html>

CSS

body {
  margin: 0;
  padding: 0;
}

table {
  border-top: 2px solid black;
  border-right: 2px solid lightgray;
  border-bottom: 2px dashed black;
  border-left: 2px double green;
  /*border-collapse: collapse;*/
  border-spacing: 10px;
  width: 100%;
  
}

td {
  border: 1px solid red;
  padding: 10px;
  padding-left: 5px;
  text-align: center;
  vertical-align: bottom;
  background-color: lightgreen;
  color: purple;
  width: 33%;
}

td:first-child {
  width: 45%;
}

caption {
  caption-side: top;
  text-align: left;
}