Как сверстать таблицу с кнопкой в каждой строке?

Для того чтобы сверстать таблицу с кнопкой в каждой строке в HTML, вам потребуется использовать элементы <table>, <tr>, <td> и <button>. Давайте пошагово разберем, как это можно сделать.

1. Начнем с создания таблицы в HTML. Вот пример структуры таблицы с тремя строками и тремя столбцами:

<table>
  <tr>
    <td>Строка 1, столбец 1</td>
    <td>Строка 1, столбец 2</td>
    <td><button>Кнопка 1</button></td>
  </tr>
  <tr>
    <td>Строка 2, столбец 1</td>
    <td>Строка 2, столбец 2</td>
    <td><button>Кнопка 2</button></td>
  </tr>
  <tr>
    <td>Строка 3, столбец 1</td>
    <td>Строка 3, столбец 2</td>
    <td><button>Кнопка 3</button></td>
  </tr>
</table>

2. В данном примере мы создали таблицу с тремя строками и тремя столбцами. В каждой строке добавили кнопку в третий столбец. При этом содержимое каждой ячейки (cell) таблицы может быть любым текстом или другими элементами.

3. После добавления текста или других элементов в ячейки таблицы, кнопки позволят взаимодействовать с каждой строкой. При клике на кнопку в определенной строке можно выполнить определенное действие с помощью JavaScript.

4. Чтобы таблица выглядела более стилизованной и удобной в использовании, рекомендуется добавить стили CSS. Например, можно добавить рамки вокруг ячеек, изменить цвета элементов и т.д.

Вот пример небольших стилей CSS для таблицы:

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid black;
  padding: 8px;
}

button {
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

Таким образом, вы можете легко сверстать таблицу с кнопкой в каждой строке в HTML, что позволит пользователям взаимодействовать с содержимым каждой строки.