HTML таблиц: как получить следующий вывод? - PullRequest
Новая
       5

HTML таблиц: как получить следующий вывод?

1 голос
/ 05 апреля 2020

Я уже более часа пытаюсь создать таблицу HTML. Я не могу понять, почему это не работает или как я должен комбинировать промежутки между строками, кольспаны. Если бы вы могли помочь мне, я был бы более чем признателен:

enter image description here

Я попробовал следующее, все не удалось, некоторые сломали мои предыдущие шаблоны как скважина: 

td {
  border: 2px solid;
  height: 100px;
  width: 100px;
}
<table>
  <tr>
    <td rowspan="5"></td>
    <td rowspan="5"></td>
  </tr>
  <tr>
    <td rowspan="3"></td>
    <td rowspan="3"></td>
  </tr>
  <tr>
    <td rowspan="3"></td>
    <td rowspan="3"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Пожалуйста, помогите мне.

Ответы [ 5 ]

4 голосов
/ 05 апреля 2020

Попробуйте со следующим: 

table { border-collapse: collapse; } 
td {
   border: 2px solid black;
   height: 100px;
   width: 100px;
}
<table>
  <tr>
    <td rowspan="2">A</td>
    <td rowspan="2">A</td>
    <td>B</td>
    <td>B</td>    
    <td>C</td>
    <td>C</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>C</td>
  </tr>
</table>
2 голосов
/ 05 апреля 2020

Я не уверен, почему вы использовали интервалы строк 5 и 3, но способ, которым это работает,

, вы указываете интервал строк или colspan, который заполняет сетку ячеек 

<table>
  <tr>
    <td rowspan="5">a</td>
    <td rowspan="5">b</td>
    <td rowspan="3">c</td>
    <td rowspan="3">d</td>
    <td rowspan="3">e</td>
  </tr>

Значит, у нас есть 5 столбцов и 5 строк (пока) 

+-+-+-+-+-+
|X|X|X|X|X| row 1
+-+-+-+-+-+
|X|X|X|X|X| row 2
+-+-+-+-+-+
|X|X|X|X|X| row 3
+-+-+-+-+-+
|X|X| | | | row 4
+-+-+-+-+-+
|X|X| | | | row 5
+-+-+-+-+-+

строки 2 и 3 не нуждаются в ячейках (без <td> с), потому что они уже указаны в первой строке.

строке 4 нужно 3 <td> для 3 неиспользуемых ячеек 

  <tr>
    <td rowspan="2">g</td>
    <td rowspan="2">h</td>
    <td rowspan="2">i</td>
  </tr>

Сетка заполнена 

+-+-+-+-+-+
|X|X|X|X|X| row 1
+-+-+-+-+-+
|X|X|X|X|X| row 2
+-+-+-+-+-+
|X|X|X|X|X| row 3
+-+-+-+-+-+
|X|X|X|X|X| row 4
+-+-+-+-+-+
|X|X|X|X|X| row 5
+-+-+-+-+-+

, поэтому строке 5 не нужны ячейки (нет <td> с) 

table { border-collapse: collapse; } 
td {
  border: 2px solid;
  height: 100px;
  width: 100px;
  text-align: center;
}
<table>
  <tr>
    <td rowspan="5">a</td>
    <td rowspan="5">b</td>
    <td rowspan="3">c</td>
    <td rowspan="3">d</td>
    <td rowspan="3">e</td>
  </tr>
  <tr></tr>
  <tr></tr>
  <tr>
    <td rowspan="2">g</td>
    <td rowspan="2">h</td>
    <td rowspan="2">i</td>
  </tr>
  <tr></tr>
</table>
1 голос
/ 05 апреля 2020

Это должно очень внимательно смотреть на то, чего вы хотите достичь. Важными частями являются сжатие бордюра, интервал между строками, ширина тд, ширина границы, использование класса. Это один из многих способов сделать это. 

td {
  border: 4px solid;
  height: 100px;
  width: 50px;
}

table {
  border-collapse: collapse;
}

.larger-width{
 width: 75px;
}
<table>
  <tr>
    <td rowspan='2' class="larger-width"></td>
    <td rowspan='2' class="larger-width"></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="larger-width"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
0 голосов
/ 05 апреля 2020

Попробуйте это решение, внесите изменения, как вы sh. 

<table width="346" height="200" border="1">
  <tbody>
    <tr>
      <td rowspan="2">&nbsp;</td>
      <td rowspan="2">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
0 голосов
/ 05 апреля 2020 
[![<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table example</title>
    <style>
        table {
            border-collapse: collapse;
        }
        table td {
            border: 5px solid black;
        }
    </style>
</head>

<body>

<table border="2" cellpadding="50px">
    <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>

</table>
</body>
</html>

Вывод будет

1 ] 1

...