Как сделать таблицу в html, используя rowspan и colspan?

Как построить эту таблицу в html??

Я хочу сделать таблицу, используя rowspan и colspan?

  <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>


<table class = "table table-bordered">
  <thead>
    <th>Subject</th>
    <th>Result</th>
  </thead>
  <tbody>
    <tr>
      <td>Science</td>
      <td>Physics</td>
      <td>Chemistry</td>
      <td>Other Science</td>
      <td>Math</td>
      <td>English</td>
    </tr>
  </tbody>
</table>

Я сделал тебе фрагмент. Пожалуйста, обратитесь к документации и добавьте больше кода

— 13.12.2020 11:08

html bootstrap-4

13.12.2020 10:54

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

172

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете узнать о тегах <table> на MDN Вы можете сделать это:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<table class = "table table-bordered">
  <thead>
    <tr>
      <th colspan = "2">Subject</th>
      <th>Result</th>
    </tr>

  </thead>
  <tbody>
    <tr>
      <td rowspan = "2">Science</td>
      <td>Physics</td>
      <td>A</td>

    </tr>
    <tr>
      <td>Chemistry</td>
      <td>A</td>
    </tr>
    <tr>
      <td rowspan = "2">Other Science</td>
      <td>Biology</td>
      <td>B</td>
    </tr>
    <tr>
      <td>Geography</td>
      <td>A</td>
    </tr>
    <tr>
      <td colspan = "2">Math</td>
      <td>A+</td>
    </tr>
    <tr>
      <td colspan = "2">English</td>
      <td>A+</td>

    </tr>

  </tbody>
</table>

13.12.2020 11:12

Это настроено с помощью colspan и rowspan

table {
  border-collapse: collapse;
}

table,
tr,
th,
td {
  border: 1px solid #000;
}

th {
  padding: 1ex;
  background: #ccc;
}

td {
  padding: 1ex;
}

.divide td {
  border-top: 3px solid;
}

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<table class = "table table-bordered">
  <thead>
    <th colspan = "2">Subject</th>
    <th>Result</th>
  </thead>
  <tbody>
    <tr>
      <td rowspan = "2" colspan = "1" width = "100px">
        SCIENCE
      </td>
      <td>
        Physics
      </td>
      <td>A</td>
    </tr>
    <tr>
      <td>
        <span>Chemistry</span>
      </td>
      <td colspan = "1">A</td>
    </tr>
    <tr>
      <td rowspan = "2" colspan = "1" width = "100px">
        SCIENCE
      </td>
      <td>
        Physics
      </td>
      <td>A</td>
    </tr>
    <tr>
      <td>
        <span>Chemistry</span>
      </td>
      <td colspan = "1">A</td>
    </tr>
    <tr>
      <td colspan = "2">
        SCIENCE
      </td>
      <td>A</td>
    </tr>
    <tr>
    <td colspan = "2">
        SCIENCE
      </td>
      <td>A</td>
    </tr>
  </tbody>
</table>


<br>
<br>
<table>
  <tr>
    <th>head</th>
    <th>title</th>
    <th>title</th>
    <th>title</th>
    <th></th>
  </tr>
  <tr>
    <td>
      <input type = "checkbox">
    </td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td rowspan = "2">white</td>
  </tr>
  <tr>
    <td colspan = "4">
      lorem ipsum
    </td>
  </tr>
  <tr class = "divide">
    <td>
      <input type = "checkbox">
    </td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td rowspan = "2">gray</td>
  </tr>
  <tr>
    <td colspan = "4">
      lorem ipsum
    </td>
  </tr>
  <tr class = "divide">
    <td>
      <input type = "checkbox">
    </td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td>white</td>
  </tr>
  <tr class = "divide">
    <td>
      <input type = "checkbox">
    </td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
    <td rowspan = "2">gray</td>
  </tr>
  <tr>
    <td colspan = "4">
      lorem ipsum
    </td>
  </tr>
</table>

13.12.2020 11:13

Другие вопросы по теме

Bootstrap выровняет svg по центру заголовка

Перемещение боковой панели Bootstrap

Почему мой SVG не будет вертикально выравниваться в React Bootstrap?

Калькулятор сетки Bootstrap или Flex Box

Карта не отвечает при использовании бутстрапа после вставки формы

Добавить текст к значку на панели навигации Bootstrap 5

Как печатать обернутый текст без горизонтальной полосы прокрутки с помощью бутстрапа?

Использование .d-flex и .flex-fill для создания карточек одинаковой высоты

Базовый макет Bootstrap 4, вложенный контейнер внутри container-fluid

Как отобразить динамически сгенерированный <select> в строке на той же строке?

Как сделать таблицу в html, используя rowspan и colspan?

Ответы 2

Другие вопросы по теме

Похожие вопросы