0

I use a HTML table in a README of one of my project. It contains 2 columns and I wanted to know if there was an easy solution to add a link on the first column, and another on the second column without adding an <a> to each table's cells:

table {
  border-collapse: collapse;
}

th,
td {
  border: solid lightgrey 1px;
}

tr th:first-of-type,
tr td:first-of-type {
  background-color: lightblue;
}

tr th:last-of-type,
tr td:last-of-type {
  background-color: lightcoral;
}
<table align="center">
  <tr>
    <th>a cell</th>
    <th>a cell</th>
  </tr>
  <tr>
    <td>a cell</td>
    <td>a cell</td>
  </tr>
  <tr>
    <td>a cell</td>
    <td>a cell</td>
  </tr>
</table>

So that if I click on the blue column it redirects me to A, and if I click on the red column it redirects me to B.

It needed for a README file so it would be great to only use pure HTML.

Johannes
  • 64,305
  • 18
  • 73
  • 130
johannchopin
  • 13,720
  • 10
  • 55
  • 101

3 Answers3

1

In pure HTML I think you can't do that easier, but maybe you should try to make two tables sticking to each other and you can wrap each table with <a>?

Kida
  • 734
  • 1
  • 9
  • 23
1

Here is a possible solution if you can fix the width of the cells (in this case I set them to 120px, but that can be any value).

It places 'a' elements inside the top cells which have the same width as the cells (120px). They have position: absolute and height: 100%;. Since position: relative is on the table element, the aelements height will automatically be equal to that of the table. I applied a grenn border to the à`s, but just to show the sapce they span - you would propabaly deactivate that.

table {
  border-collapse: collapse;
  position: relative;
}

th,
td {
  border: solid lightgrey 1px;
  width: 120px;
  text-align: center;
  box-sizing: border-box;
}

tr th:first-of-type,
tr td:first-of-type {
  background-color: lightblue;
}

tr th:last-of-type,
tr td:last-of-type {
  background-color: lightcoral;
}

a.column1link,
a.column2link {
  text-decoration: none;
  color: inherit;
  display: block;
  position: absolute;
  width: 120px;
  height: 100%;
  top: 0;
  border: 1px solid green;
  box-sizing: border-box;
}
a.column1link:hover,
a.column2link:hover {
  border-color: yellow; 
}
<table align="center">
  <tr>
    <th><a href='#' class="column1link">a cell</a>&nbsp;</th>
    <th><a href='#' class="column2link">a cell</a>&nbsp;</th>
  </tr>
  <tr>
    <td>a cell</td>
    <td>a cell</td>
  </tr>
  <tr>
    <td>a cell</td>
    <td>a cell</td>
  </tr>
</table>
Johannes
  • 64,305
  • 18
  • 73
  • 130
0

Maybe using onclick="window.location='#';" in the tag tr with this CSS(tr{cursor: pointer;}) may it works

     tr {
         cursor: pointer; 
        }

    table {
      border-collapse: collapse;
    }
    
    th,
    td {
      border: solid lightgrey 1px;
    }
    
    tr th:first-of-type,
    tr td:first-of-type {
      background-color: lightblue;
    }
    
    tr th:last-of-type,
    tr td:last-of-type {
      background-color: lightcoral;
    }
<table align="center">
              <tr>
                <th>a cell</th>
                <th>a cell</th>
              </tr>
              
              <tr onclick="window.location='#';">
                <td>a cell</td>
                <td>a cell</td>
              </tr>
        
              <tr onclick="window.location='#';">
                <td>a cell</td>
                <td>a cell</td>
              </tr>
            </table>

EDIT**

Try this, I adapt from here, maybe you find a better answer here : how to make a whole row in a table clickable as a link?

      tr {
             cursor: pointer; 
            }

        table {
          border-collapse: collapse;
        }
        
        th,
        td {
          border: solid lightgrey 1px;
        }
        
        tr th:first-of-type,
        tr td:first-of-type {
          background-color: lightblue;
        }
        
        tr th:last-of-type,
        tr td:last-of-type {
          background-color: lightcoral;
        }
<table align="center">
                  <tr>
                    <th>a cell</th>
                    <th>a cell</th>
                  </tr>
                  
                  <a href="####">
                  <div>
                  <tr >
                    <td>a cell</td>
                    <td>a cell</td>
                  </tr>
                  </div>
                  </a>
            
                  <tr >
                  <a href="####">
                  <div>
                    <td>a cell</td>
                    <td>a cell</td>
                    </div>
                    </a>
                  </tr>
                </table>
Vilmar Pavesi
  • 51
  • 4