HTML. Выравнивание таблицы по верху

Question

Имеется таблица:

<table width="100%">
  <tr>
    <td width="25%">
      <p align="center">
        <table border="2" style="color: darkgray;">
          <tr>
            <td colspan="2">
              <zag> Общая информация </zag>
            </td>
          </tr>
          <tr>
            <td> Страна марки </td>
            <td> Германия </td>
          </tr>
          <tr>
            <td> Класс автомобиля </td>
            <td> M </td>
          </tr>
          <tr>
            <td> Количество дверей </td>
            <td> 5 </td>
          </tr>
          <tr>
            <td> Количество мест </td>
            <td> 6 </td>
          </tr>
          <tr>
            <td> Расположение руля </td>
            <td> Левый </td>
          </tr>
          <tr>
            <td colspan="2">
              <zag> Размеры </zag>
            </td>
          </tr>
          <tr>
            <td> Длина </td>
            <td> 5370 мм </td>
          </tr>
          <tr>
            <td> Ширина </td>
            <td> 1928 мм </td>
          </tr>
          <tr>
            <td> Высота </td>
            <td> 1880 мм </td>
          </tr>
          <tr>
            <td> Колёсная база </td>
            <td> 3430 мм </td>
          </tr>
          <tr>
            <td> Клиренс </td>
            <td> 160 мм </td>
          </tr>
          <tr>
            <td> Ширина передней колеи </td>
            <td> 1666 мм </td>
          </tr>
          <tr>
            <td> Ширина задней колеи </td>
            <td> 1646 мм </td>
          </tr>
          <tr>
            <td> Размер колёс </td>
            <td> 245/45/R19 </td>
          </tr>
          <tr>
            <td> Сверловка </td>
            <td> DIA66.5 5x112 мм </td>
          </tr>
          <tr>
            <td> Размеры дисков </td>
            <td> 8x19 ET52 </td>
          </tr>


        </table>
      </p>



    </td>

    <td width="45%">
      <p align="center">
        <table border="1" style="color: darkgray;">
          <tr>
            <td colspan="2">
              <zag> Объем и масса </zag>
            </td>
          </tr>

          <tr>
            <td> Объем багажника мин/макс </td>
            <td> 1410/5010 л </td>
          </tr>
          <tr>
            <td> Объём топливного бака </td>
            <td> 57 л </td>
          </tr>
          <tr>
            <td> Снаряженная масса </td>
            <td> 2245 кг </td>
          </tr>
          <tr>
            <td> Полная масса </td>
            <td> 3200 кг </td>
          </tr>

          <tr>
            <td colspan="2">
              <zag> Транмиссия </zag>
            </td>
          </tr>

          <tr>
            <td> Коробка передач </td>
            <td> Автомат </td>
          </tr>
          <tr>
            <td> Количество передач </td>
            <td> 9 </td>
          </tr>
          <tr>
            <td> Тип привода </td>
            <td> полный </td>
          </tr>

          <tr>
            <td colspan="2">
              <zag> Подвеска и тормоза </zag>
            </td>
          </tr>

          <tr>
            <td> Тип передней подвески </td>
            <td> независимая, пружинная </td>
          </tr>
          <tr>
            <td> Тип задней подвески </td>
            <td> независимая, пружинная </td>
          </tr>
          <tr>
            <td> Передние тормоза </td>
            <td> дисковые вентилируемые </td>
          </tr>
          <tr>
            <td> Задние тормоза </td>
            <td> дисковые </td>
          </tr>

          <tr>
            <tr>
              <td> Задние тормоза </td>
              <td> дисковые </td>
            </tr>
            <td colspan="2">
              <zag> Эксплуатационные показатели </zag>
            </td>
          </tr>
          <tr>
            <td> Максимальная скорость </td>
            <td> 205 км/ч </td>
          </tr>
          <tr>
            <td> Разгон до 100 км/ч </td>
            <td> 9.6 с </td>
          </tr>
          <tr>
            <td> Расход топлива, город/трасса/смешанный </td>
            <td> 10.1/6.9/8.1 л/100 км </td>
          </tr>
          <tr>
            <td> Марка топлива </td>
            <td> ДТ </td>
          </tr>
          <tr>
            <td> Экологический класс </td>
            <td> Euro 6 </td>
          </tr>
          <tr>
            <td> Выбросы CO2 </td>
            <td> 211 г/км </td>
          </tr>






        </table>
      </p>
    </td>

    <td width="30%">
      <p align="center">
        <table border="1" style="color: darkgray;">
          <tr>
            <td colspan="2">
              <zag> Двигатель </zag>
            </td>
          </tr>
          <tr>
            <td> Тип двигателя </td>
            <td> дизельный </td>
          </tr>
          <tr>
            <td> Расположение двигателя </td>
            <td> переднее, поперечное </td>
          </tr>
          <tr>
            <td> Объем двигателя </td>
            <td> 1950 см³ </td>
          </tr>
          <tr>
            <td> Тип наддува </td>
            <td> турбонаддув </td>
          </tr>
          <tr>
            <td> Максимальная мощность </td>
            <td> 190 л.с. (140 кВт) при 4200 об/мин </td>
          </tr>
          <tr>
            <td> Максимальный крутящий момент </td>
            <td> 440 Н*м при 2400 об/мин </td>
          </tr>
          <tr>
            <td> Расположение цилиндров </td>
            <td> рядное </td>
          </tr>
          <tr>
            <td> Количество цилиндров </td>
            <td> 4 </td>
          </tr>
          <tr>
            <td> Число клапанов на цилиндр </td>
            <td> 4 </td>
          </tr>
          <tr>
            <td> Система питания двигателя </td>
            <td> Common rail (Дизель) </td>
          </tr>
          <tr>
            <td> Степень сжатия </td>
            <td> 15.5 </td>
          </tr>
          <tr>
            <td> Диаметр цилиндра и ход поршня </td>
            <td> 82.0x92.3 мм </td>
          </tr>
          <tr>
            <td> Код двигателя </td>
            <td> OM654.920 </td>
          </tr>
        </table>
      </p>
    </td>
  </tr>
</table>

И она у меня расположена вот так: Как мне сделать, чтобы все 3 таблицы выравнивались по верху? Не было отступов сверху

Answer 1

.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  height: auto;
}

td,
th {
  border: 1px solid #595959;
}

.bn {
  border: none;
}

h1 {
  text-align: center;
}

<h1>Характеристики</h1>
<table class="table">
  <tbody>
    <tr>
      <th colspan="2">Общая информация</th>
      <th colspan="2">Объем и масса</th>
      <th colspan="2">Двигатель</th>
    </tr>
    <tr>
      <td>Страна марки</td>
      <td>Германия</td>
      <td>Объем багажника мин/макс</td>
      <td>1410/5010</td>
      <td>Тип двигателя</td>
      <td>дизельный</td>
    </tr>
    <tr>
      <td>Класс автомобиля</td>
      <td>M</td>
      <td>Объём топливного бака</td>
      <td>57 л</td>
      <td>Расположение двигателя</td>
      <td>переднее, поперечное</td>
    </tr>
    <tr>
      <td>Количество дверей</td>
      <td>5</td>
      <td>Снаряженная масса</td>
      <td>2245 кг</td>
      <td>Объем двигателя</td>
      <td>1950 см³</td>
    </tr>
    <tr>
      <td>Количество мест</td>
      <td>6</td>
      <td>Полная масса</td>
      <td>3200 кг</td>
      <td>Тип наддува</td>
      <td>турбонаддув</td>
    </tr>
    <tr>
      <td>Расположение руля</td>
      <td>Левый</td>
      <th colspan="2">Транмиссия</th>
      <td>Максимальная мощность</td>
      <td>190 л.с. (140 кВт) при 4200 об/мин</td>
    </tr>
    <tr>
      <th colspan="2">Размеры</th>
      <td>Коробка передач</td>
      <td>Автомат</td>
      <td>Максимальный крутящий момент</td>
      <td>440 Н*м при 2400 об/мин</td>
    </tr>
    <tr>
      <td>Длина</td>
      <td>5370 мм</td>
      <td>Количество передач</td>
      <td>9</td>
      <td>Расположение цилиндров</td>
      <td>рядное</td>
    </tr>
    <tr>
      <td>Ширина</td>
      <td>1928 мм</td>
      <td>Тип привода</td>
      <td>полный</td>
      <td>Количество цилиндров</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Высота</td>
      <td>1880 мм</td>
      <th colspan="2">Подвеска и тормоза</th>
      <td>Число клапанов на цилиндр</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Колёсная база</td>
      <td>3430 мм</td>
      <td>Тип передней подвески</td>
      <td>независимая, пружинная</td>
      <td>Система питания двигателя</td>
      <td>Common rail (Дизель)</td>
    </tr>
    <tr>
      <td>Клиренс</td>
      <td>160 мм</td>
      <td>Тип задней подвески</td>
      <td>независимая, пружинная</td>
      <td>Степень сжатия</td>
      <td>15.5</td>
    </tr>
    <tr>
      <td>Ширина передней колеи</td>
      <td>1666 мм</td>
      <td>Передние тормоза</td>
      <td>дисковые вентилируемые</td>
      <td>Диаметр цилиндра и ход поршня</td>
      <td>82.0x92.3 мм</td>
    </tr>
    <tr>
      <td>Ширина задней колеи</td>
      <td>1646 мм</td>
      <td>Задние тормоза</td>
      <td>дисковые</td>
      <td>Код двигателя </td>
      <td>OM654.920</td>
    </tr>
    <tr>
      <td>Размер колёс</td>
      <td>245/45/R19</td>
      <td>Задние тормоза</td>
      <td>дисковые</td>
      <td class="bn"></td>
      <td class="bn"></td>
    </tr>
    <tr>
      <td>Сверловка</td>
      <td>DIA66.5 5x112 мм</td>
      <th colspan="2">Эксплуатационные показатели</th>
      <td class="bn"></td>
      <td class="bn"></td>
    </tr>
    <tr>
      <td>Размеры дисков</td>
      <td>8x19 ET52</td>
      <td>Максимальная скорость</td>
      <td>205 км/ч</td>
      <td class="bn"></td>
      <td class="bn"></td>
    </tr>
    <tr>
      <td class="bn"></td>
      <td class="bn"></td>
      <td>Разгон до 100 км/ч</td>
      <td>9.6 с</td>
      <td class="bn"></td>
      <td class="bn"></td>
    </tr>
    <tr>
      <td class="bn"></td>
      <td class="bn"></td>
      <td>Расход топлива, город/трасса/смешанный</td>
      <td>10.1/6.9/8.1 л/100 км</td>
      <td class="bn"></td>
      <td class="bn"></td>
    </tr>
    <tr>
      <td class="bn"></td>
      <td class="bn"></td>
      <td>Марка топлива</td>
      <td>ДТ</td>
      <td class="bn"></td>
      <td class="bn"></td>
      <tr>
        <td class="bn"></td>
        <td class="bn"></td>
        <td>Экологический класс</td>
        <td>Euro 6</td>
        <td class="bn"></td>
        <td class="bn"></td>
      </tr>
      <tr>
        <td class="bn"></td>
        <td class="bn"></td>
        <td>Выбросы CO2</td>
        <td>211 г/км</td>
        <td class="bn"></td>
        <td class="bn"></td>
      </tr>
  </tbody>
</table>

Можно сделать одну таблицу, а не склеивать три. Вариант с одной таблицей и на маленьких экранах будет смотреться аккуратнее.

table {
  vertical-align: top;
}
h1 {
  text-align: center;
}
.table1 {
  display: inline-block;
    width: 25%;
    border-collapse:collapse;
    border-spacing:0;
    height: auto;
}
.table2 {
  display: inline-block;
    width: 45%;
    border-collapse: collapse;
    border-spacing: 0;
    height: auto;
}
.table3 {
  display: inline-block;
    width: 25%;
    border-collapse: collapse;
    border-spacing: 0;
    height: auto;
}
td, th {
    width: auto;
    height: auto;
  border: 1px solid #595959;
}

    <h1>Характеристики</h1>
<table class="table1">
    <tbody>
        <tr>
            <th colspan="2">Общая информация</th>
        </tr>
        <tr>
            <td>Страна марки</td>
            <td>Германия</td>
        </tr>
        <tr>
            <td>Класс автомобиля</td>
            <td>M</td>
        </tr>
        <tr>
            <td>Количество дверей</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Количество мест</td>
            <td>6</td>
        </tr>
        <tr>
            <td>Расположение руля </td>
            <td>Левый</td>
        </tr>
        <tr>
            <th colspan="2">Размеры</th>
        </tr>
        <tr>
            <td>Длина</td>
            <td>5370 мм</td>
        </tr>
        <tr>
            <td>Ширина</td>
            <td>1928 мм</td>
        </tr>
        <tr>
            <td>Высота</td>
            <td>1880 мм</td>
        </tr>
        <tr>
            <td>Колёсная база</td>
            <td>3430 мм</td>
        </tr>
        <tr>
            <td>Клиренс</td>
            <td>160 мм</td>
        </tr>
        <tr>
            <td>Ширина передней колеи</td>
            <td>1666 мм</td>
        </tr>
        <tr>
            <td>Ширина задней колеи</td>
            <td>1646 мм</td>
        </tr>
        <tr>
            <td>Размер колёс</td>
            <td>245/45/R19</td>
        </tr>
        <tr>
            <td>Сверловка</td>
            <td>DIA66.5 5x112 мм</td>
        </tr>
        <tr>
            <td>Размеры дисков</td>
            <td>8x19 ET52</td>
        </tr>
    </tbody>
</table>
<table class="table2">
    <tbody>
        <tr>
            <th colspan="2">Объем и масса</th>
        </tr>
        <tr>
            <td>Объем багажника мин/макс</td>
            <td>1410/5010 л</td>
        </tr>
        <tr>
            <td>Объём топливного бака</td>
            <td>57 л</td>
        </tr>
        <tr>
            <td>Снаряженная масса</td>
            <td>2245 кг</td>
        </tr>
        <tr>
            <td>Полная масса</td>
            <td>3200 кг</td>
        </tr>
        <tr>
            <th colspan="2">Транмиссия </th>
        </tr>
        <tr>
            <td>Коробка передач</td>
            <td>Автомат</td>
        </tr>
        <tr>
            <td>Количество передач</td>
            <td>9</td>
        </tr>
        <tr>
            <td>Тип привода</td>
            <td>полный</td>
        </tr>
        <tr>
            <th colspan="2">Подвеска и тормоза</th>
        </tr>
        <tr>
            <td>Тип передней подвески</td>
            <td>независимая, пружинная</td>
        </tr>
        <tr>
            <td>Тип задней подвески</td>
            <td>независимая, пружинная </td>
        </tr>
        <tr>
            <td>Передние тормоза</td>
            <td>дисковые вентилируемые</td>
        </tr>
        <tr>
            <td>Задние тормоза</td>
            <td>дисковые</td>
        </tr>
        <tr>
            <td>Задние тормоза</td>
            <td>дисковые</td>
        </tr>
        <tr>
            <th colspan="2">Эксплуатационные показатели</th>
        </tr>
        <tr>
            <td>Максимальная скорость</td>
            <td>205 км/ч</td>
        </tr>
        <tr>
            <td>Разгон до 100 км/ч</td>
            <td>9.6 с</td>
        </tr>
        <tr>
            <td>Расход топлива, город/трасса/смешанный</td>
            <td>10.1/6.9/8.1 л/100 км</td>
        </tr>
        <tr>
            <td>Марка топлива</td>
            <td>ДТ</td>
        </tr>
        <tr>
            <td>Экологический класс</td>
            <td>Euro 6</td>
        </tr>
        <tr>
            <td>Выбросы CO2</td>
            <td>211 г/км</td>
        </tr>
    </tbody>
</table>
<table class="table3">
    <tbody>
        <tr>
            <th colspan="2">Двигатель</th>
        </tr>
        <tr>
            <td> Тип двигателя </td>
            <td>дизельный</td>
        </tr>
        <tr>
            <td>Расположение двигателя</td>
            <td>переднее, поперечное</td>
        </tr>
        <tr>
            <td>Объем двигателя</td>
            <td>1950 см³</td>
        </tr>
        <tr>
            <td>Тип наддува</td>
            <td>турбонаддув</td>
        </tr>
        <tr>
            <td>Максимальная мощность</td>
            <td>190 л.с. (140 кВт) при 4200 об/мин</td>
        </tr>
        <tr>
            <td>Максимальный крутящий момент</td>
            <td>440 Н*м при 2400 об/мин</td>
        </tr>
        <tr>
            <td>Расположение цилиндров</td>
            <td>рядное </td>
        </tr>
        <tr>
            <td>Количество цилиндров</td>
            <td>4</td>
        </tr>
        <tr>
            <td>Число клапанов на цилиндр</td>
            <td>4</td>
        </tr>
        <tr>
            <td>Система питания двигателя</td>
            <td>Common rail (Дизель)</td>
        </tr>
        <tr>
            <td>Степень сжатия</td>
            <td>15.5</td>
        </tr>
        <tr>
            <td>Диаметр цилиндра и ход поршня</td>
            <td>82.0x92.3 мм</td>
        </tr>
        <tr>
            <td>Код двигателя</td>
            <td>OM654.920</td>
        </tr>
    </tbody>
</table>

зачем там <p> и что за зверь этот тигр (читай <zag></zag>)? Вот валидный код ваших таблиц. Смотрите на компьютерной версии

БЛОГ НА HUSL

HTML. Выравнивание таблицы по верху

Ответы (1 шт):