One image on three rows?(HTML)

stefanmz · April 20, 2021

Hey,so I have a table in html and it has three rows and three columns. And on the second column I want to put an image as a background, but like one image on the whole column(the three rows) and it starts on the first row and ends on the third not the same image but it starts again on each row. Can I do that? I can't exactly put them in a div without including other elements.

Biohazard777 · April 21, 2021

What you are looking for isn't supported by default in CSS, so you will have to make it out of more elements.

One way to do it:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid grey;
  border-collapse: collapse;
}
.light-blue{
	background-color: lightblue
}
.light-coral{
	background-color: lightCoral
}
.light-yellow{
	background-color: LightGoldenRodYellow
}
.inner-table{
	margin:0;  
	padding:0;
	border-style: hidden;
	background: white url('https://picsum.photos/id/777/1920/1280') no-repeat fixed top;
}
.pmb-0{
	padding-bottom: 0;
    margin-bottom: 0;
}
</style>
</head>
<body>

<h1>Example table</h1>

<table>
  <tr>
    <td class="light-blue">HTML</td>
    <td rowspan="3">
      <table class="inner-table">
        <tr>
          <td class="pmb-0">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </td>
        </tr>
        <tr>
          <td class="pmb-0">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </td>
        </tr>
        <tr>
          <td class="pmb-0">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </td>
        </tr>
      </table>
    </td>
    <td class="light-blue"><a href="#">Some_url_1</a></td>
  </tr>
  <tr>
   <td class="light-coral">CSS</td>
   <td class="light-coral"><a href="#">Some_url_2</a></td>
  </tr>
  <tr>
    <td class="light-yellow">Javascript</td>
    <td class="light-yellow"><a href="#">Some_url_3</a></td>
  </tr>
</table>

</body>
</html>