HTML how do I make every entry in my table a button

Question

Alright so basically I want to make a periodic table in HTML and I want each element in the list to be a button that goes to a different URL. However I want the entire sector to be clickable not just the text. I tried the button function as well but that doesn't make the entire sector clickable either.

CSS

@font-face { font-family: UbuntuG; src: url('ubuntu-fonts/Ubuntu-L.ttf'); } 
body {
    background-color: #1d1d1d;
}
h1 {
    color: white; font-family: UbuntuG; font-size: 30;
}
p_Default {
    color: white; font-family: Arial; font-size: 16;
}
p_ANum {
    color: white; font-family: Arial; font-size: 10; text-align: left;
}

table, th, td {
    border: 1px solid #1d1d1d; border-spacing: 0; color: white; font-family: Arial; font-size: 16; 
}
td  {
    text-align: center
}
ul{
  margin: 0px 0;
}

<html>
  <head>
    <title>Periodic Table</title>
    <meta content="??">
    <link rel="stylesheet" type="text/css" href="theme.css">
    <style></style>
  </head>
  <body>
    <h1>Periodic Table</h1>
        <center>
        
    <table width="1050px" height="500px">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
    </tr><tr>
        <td bgcolor="#339933"><a href="www.google.com">H</a></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td bgcolor="#7e51a1">He</td>
    </tr><tr>
        <td bgcolor="#f09609">Li</td>
        <td bgcolor="#996600">Be</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td bgcolor="#16aba8">B</td>
        <td bgcolor="#339933">C</td>
        <td bgcolor="#339933">N</td>
        <td bgcolor="#339933">O</td>
        <td bgcolor="#8ac03f">F</td>
        <td bgcolor="#7e51a1">Ne</td>
    </tr><tr>
        <td bgcolor="#f09609">Na</td>
        <td bgcolor="#996600">Mg</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td bgcolor="#219fd9">Al</td>
        <td bgcolor="#16aba8">Si</td>
        <td bgcolor="#339933">P</td>
        <td bgcolor="#339933">S</td>
        <td bgcolor="#8ac03f">Cl</td>
        <td bgcolor="#7e51a1">Ar</td>
    </tr><tr>
        <td bgcolor="#f09609">K</td>
        <td bgcolor="#996600">Ca</td>
        <td bgcolor="#df72ac">Sc</td>
        <td bgcolor="#df72ac">Ti</td>
        <td bgcolor="#df72ac">V</td>
        <td bgcolor="#df72ac">Cr</td>
        <td bgcolor="#df72ac">Mn</td>
        <td bgcolor="#df72ac">Fe</td>
        <td bgcolor="#df72ac">Co</td>
        <td bgcolor="#df72ac">Ni</td>
        <td bgcolor="#df72ac">Cu</td>
        <td bgcolor="#df72ac">Zn</td>
        <td bgcolor="#219fd9">Ga</td>
        <td bgcolor="#16aba8">Ge</td>
        <td bgcolor="#16aba8">As</td>
        <td bgcolor="#339933">Se</td>
        <td bgcolor="#8ac03f">Br</td>
        <td bgcolor="#7e51a1">Kr</td>
    </tr><tr>
        <td bgcolor="#f09609">Rb</td>
        <td bgcolor="#996600">Sr</td>
        <td bgcolor="#df72ac">Y</td>
        <td bgcolor="#df72ac">Zr</td>
        <td bgcolor="#df72ac">Nb</td>
        <td bgcolor="#df72ac">Mo</td>
        <td bgcolor="#df72ac">Tc</td>
        <td bgcolor="#df72ac">Ru</td>
        <td bgcolor="#df72ac">Rh</td>
        <td bgcolor="#df72ac">Pd</td>
        <td bgcolor="#df72ac">Ag</td>
        <td bgcolor="#df72ac">Cd</td>
        <td bgcolor="#219fd9">In</td>
        <td bgcolor="#219fd9">Sn</td>
        <td bgcolor="#16aba8">Sb</td>
        <td bgcolor="#16aba8">Te</td>
        <td bgcolor="#8ac03f">I</td>
        <td bgcolor="#7e51a1">Xe</td>
    </tr><tr>
        <td bgcolor="#f09609">Cs</td>
        <td bgcolor="#996600">Ba</td>
        <td bgcolor="#ed1790">*</td>
        <td bgcolor="#df72ac">Hf</td>
        <td bgcolor="#df72ac">Ta</td>
        <td bgcolor="#df72ac">W</td>
        <td bgcolor="#df72ac">Re</td>
        <td bgcolor="#df72ac">Os</td>
        <td bgcolor="#df72ac">Ir</td>
        <td bgcolor="#df72ac">Pt</td>
        <td bgcolor="#df72ac">Au</td>
        <td bgcolor="#df72ac">Hg</td>
        <td bgcolor="#219fd9">Tl</td>
        <td bgcolor="#219fd9">Pb</td>
        <td bgcolor="#219fd9">Bi</td>
        <td bgcolor="#16aba8">Po</td>
        <td bgcolor="#8ac03f">At</td>
        <td bgcolor="#7e51a1">Rn</td>
    </tr><tr>
        <td bgcolor="#f09609">Fr</td>
        <td bgcolor="#996600">Ra</td>
        <td bgcolor="#e51e25">**</td>
        <td bgcolor="#df72ac">Rf</td>
        <td bgcolor="#df72ac">Db</td>
        <td bgcolor="#df72ac">Sg</td>
        <td bgcolor="#df72ac">Bh</td>
        <td bgcolor="#df72ac">Hs</td>
        <td bgcolor="#df72ac">Mt</td>
        <td bgcolor="#df72ac">Ds</td>
        <td bgcolor="#df72ac">Rg</td>
        <td bgcolor="#df72ac">Cn</td>
        <td bgcolor="#767676">Nh</td>
        <td bgcolor="219fd9">Fl</td>
        <td bgcolor="#767676">Mc</td>
        <td bgcolor="#767676">Lv</td>
        <td bgcolor="#767676">Ts</td>
        <td bgcolor="#767676">Og</td>
    </tr><tr>
    <td></td>
    </tr><tr>
        <td></td>
        <td >*</td>
        <td bgcolor="#ed1790">La</td>
        <td bgcolor="#ed1790">Ce</td>
        <td bgcolor="#ed1790">Pr</td>
        <td bgcolor="#ed1790">Nd</td>
        <td bgcolor="#ed1790">Pm</td>
        <td bgcolor="#ed1790">Sm</td>
        <td bgcolor="#ed1790">Eu</td>
        <td bgcolor="#ed1790">Gd</td>
        <td bgcolor="#ed1790">Tb</td>
        <td bgcolor="#ed1790">Dy</td>
        <td bgcolor="#ed1790">Ho</td>
        <td bgcolor="#ed1790">Er</td>
        <td bgcolor="#ed1790">Tm</td>
        <td bgcolor="#ed1790">Yb</td>
        <td bgcolor="#ed1790">Lu</td>
    </tr><tr>
        <td></td>
        <td >**</td>
        <td bgcolor="#e51e25">Ac</td>
        <td bgcolor="#e51e25">Th</td>
        <td bgcolor="#e51e25">Pa</td>
        <td bgcolor="#e51e25">U</td>
        <td bgcolor="#e51e25">Np</td>
        <td bgcolor="#e51e25">Pu</td>
        <td bgcolor="#e51e25">Am</td>
        <td bgcolor="#e51e25">Cm</td>
        <td bgcolor="#e51e25">Bk</td>
        <td bgcolor="#e51e25">Cf</td>
        <td bgcolor="#e51e25">Es</td>
        <td bgcolor="#e51e25">Fm</td>
        <td bgcolor="#e51e25">Md</td>
        <td bgcolor="#e51e25">No</td>
        <td bgcolor="#e51e25">Lr</td>
    </tr>
    </table>
    
    <img src="assets/table.png" alt="Mountain View">
    </center>
    
  </body>
</html>

you can either use javascript to make the `td` clickable, or you can surround the element name in a `` tag, and modify the css for those — Ibu, Jan 31 '17 at 22:08
Possible duplicate of [How can I make a link from a table cell](http://stackoverflow.com/questions/3337914/how-can-i-make-a-link-from-a-td-table-cell) — Moses Davidowitz, Jan 31 '17 at 22:11

score 0 · Answer 1 · edited Jan 31 '17 at 22:19

Remove the width property to your table

Add padding to your a elements

td a {
  padding:18px;
}
td {
  min-width:48px;
}

Here is a working example:

td a {
  padding:18px;
 }
td {
  min-width:48px;
}
@font-face { font-family: UbuntuG; src: url('ubuntu-fonts/Ubuntu-L.ttf'); } 
body {
    background-color: #1d1d1d;
}
h1 {
    color: white; font-family: UbuntuG; font-size: 30;
}
p_Default {
    color: white; font-family: Arial; font-size: 16;
}
p_ANum {
    color: white; font-family: Arial; font-size: 10; text-align: left;
}

table, th, td {
    border: 1px solid #1d1d1d; border-spacing: 0; color: white; font-family: Arial; font-size: 16; 
}
td  {
    text-align: center
}
ul{
  margin: 0px 0;
}

 <body>
    <h1>Periodic Table</h1>
        <center>
        
    <table height="500px">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
    </tr><tr>
        <td bgcolor="#339933"><a href="www.google.com">H</a></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td bgcolor="#7e51a1">He</td>
    </tr><tr>
        <td bgcolor="#f09609">Li</td>
        <td bgcolor="#996600">Be</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td bgcolor="#16aba8">B</td>
        <td bgcolor="#339933">C</td>
        <td bgcolor="#339933">N</td>
        <td bgcolor="#339933">O</td>
        <td bgcolor="#8ac03f">F</td>
        <td bgcolor="#7e51a1">Ne</td>
    </tr><tr>
        <td bgcolor="#f09609">Na</td>
        <td bgcolor="#996600">Mg</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td bgcolor="#219fd9">Al</td>
        <td bgcolor="#16aba8">Si</td>
        <td bgcolor="#339933">P</td>
        <td bgcolor="#339933">S</td>
        <td bgcolor="#8ac03f">Cl</td>
        <td bgcolor="#7e51a1">Ar</td>
    </tr><tr>
        <td bgcolor="#f09609">K</td>
        <td bgcolor="#996600">Ca</td>
        <td bgcolor="#df72ac">Sc</td>
        <td bgcolor="#df72ac">Ti</td>
        <td bgcolor="#df72ac">V</td>
        <td bgcolor="#df72ac">Cr</td>
        <td bgcolor="#df72ac">Mn</td>
        <td bgcolor="#df72ac">Fe</td>
        <td bgcolor="#df72ac">Co</td>
        <td bgcolor="#df72ac">Ni</td>
        <td bgcolor="#df72ac">Cu</td>
        <td bgcolor="#df72ac">Zn</td>
        <td bgcolor="#219fd9">Ga</td>
        <td bgcolor="#16aba8">Ge</td>
        <td bgcolor="#16aba8">As</td>
        <td bgcolor="#339933">Se</td>
        <td bgcolor="#8ac03f">Br</td>
        <td bgcolor="#7e51a1">Kr</td>
    </tr><tr>
        <td bgcolor="#f09609">Rb</td>
        <td bgcolor="#996600">Sr</td>
        <td bgcolor="#df72ac">Y</td>
        <td bgcolor="#df72ac">Zr</td>
        <td bgcolor="#df72ac">Nb</td>
        <td bgcolor="#df72ac">Mo</td>
        <td bgcolor="#df72ac">Tc</td>
        <td bgcolor="#df72ac">Ru</td>
        <td bgcolor="#df72ac">Rh</td>
        <td bgcolor="#df72ac">Pd</td>
        <td bgcolor="#df72ac">Ag</td>
        <td bgcolor="#df72ac">Cd</td>
        <td bgcolor="#219fd9">In</td>
        <td bgcolor="#219fd9">Sn</td>
        <td bgcolor="#16aba8">Sb</td>
        <td bgcolor="#16aba8">Te</td>
        <td bgcolor="#8ac03f">I</td>
        <td bgcolor="#7e51a1">Xe</td>
    </tr><tr>
        <td bgcolor="#f09609">Cs</td>
        <td bgcolor="#996600">Ba</td>
        <td bgcolor="#ed1790">*</td>
        <td bgcolor="#df72ac">Hf</td>
        <td bgcolor="#df72ac">Ta</td>
        <td bgcolor="#df72ac">W</td>
        <td bgcolor="#df72ac">Re</td>
        <td bgcolor="#df72ac">Os</td>
        <td bgcolor="#df72ac">Ir</td>
        <td bgcolor="#df72ac">Pt</td>
        <td bgcolor="#df72ac">Au</td>
        <td bgcolor="#df72ac">Hg</td>
        <td bgcolor="#219fd9">Tl</td>
        <td bgcolor="#219fd9">Pb</td>
        <td bgcolor="#219fd9">Bi</td>
        <td bgcolor="#16aba8">Po</td>
        <td bgcolor="#8ac03f">At</td>
        <td bgcolor="#7e51a1">Rn</td>
    </tr><tr>
        <td bgcolor="#f09609">Fr</td>
        <td bgcolor="#996600">Ra</td>
        <td bgcolor="#e51e25">**</td>
        <td bgcolor="#df72ac">Rf</td>
        <td bgcolor="#df72ac">Db</td>
        <td bgcolor="#df72ac">Sg</td>
        <td bgcolor="#df72ac">Bh</td>
        <td bgcolor="#df72ac">Hs</td>
        <td bgcolor="#df72ac">Mt</td>
        <td bgcolor="#df72ac">Ds</td>
        <td bgcolor="#df72ac">Rg</td>
        <td bgcolor="#df72ac">Cn</td>
        <td bgcolor="#767676">Nh</td>
        <td bgcolor="219fd9">Fl</td>
        <td bgcolor="#767676">Mc</td>
        <td bgcolor="#767676">Lv</td>
        <td bgcolor="#767676">Ts</td>
        <td bgcolor="#767676">Og</td>
    </tr><tr>
    <td></td>
    </tr><tr>
        <td></td>
        <td >*</td>
        <td bgcolor="#ed1790">La</td>
        <td bgcolor="#ed1790">Ce</td>
        <td bgcolor="#ed1790">Pr</td>
        <td bgcolor="#ed1790">Nd</td>
        <td bgcolor="#ed1790">Pm</td>
        <td bgcolor="#ed1790">Sm</td>
        <td bgcolor="#ed1790">Eu</td>
        <td bgcolor="#ed1790">Gd</td>
        <td bgcolor="#ed1790">Tb</td>
        <td bgcolor="#ed1790">Dy</td>
        <td bgcolor="#ed1790">Ho</td>
        <td bgcolor="#ed1790">Er</td>
        <td bgcolor="#ed1790">Tm</td>
        <td bgcolor="#ed1790">Yb</td>
        <td bgcolor="#ed1790">Lu</td>
    </tr><tr>
        <td></td>
        <td >**</td>
        <td bgcolor="#e51e25">Ac</td>
        <td bgcolor="#e51e25">Th</td>
        <td bgcolor="#e51e25">Pa</td>
        <td bgcolor="#e51e25">U</td>
        <td bgcolor="#e51e25">Np</td>
        <td bgcolor="#e51e25">Pu</td>
        <td bgcolor="#e51e25">Am</td>
        <td bgcolor="#e51e25">Cm</td>
        <td bgcolor="#e51e25">Bk</td>
        <td bgcolor="#e51e25">Cf</td>
        <td bgcolor="#e51e25">Es</td>
        <td bgcolor="#e51e25">Fm</td>
        <td bgcolor="#e51e25">Md</td>
        <td bgcolor="#e51e25">No</td>
        <td bgcolor="#e51e25">Lr</td>
    </tr>
    </table>
    
    <img src="assets/table.png" alt="Mountain View">
    </center>
    
  </body>

score 0 · Answer 2 · answered Jan 31 '17 at 22:16

Give the td elements a fixed height (43px) and the a elements a display: block with a line-height matching the height of the td element.

td  {
  text-align: center;
  padding: 0;
  height: 43px;
}

a {
  display: block;
  line-height: 43px;
}

The display: block on the a element causes it to extend the full width of the td element, and the height/line-height centers the text vertically within the element while making the full-height of the element clickable.

@font-face {
  font-family: UbuntuG;
  src: url('ubuntu-fonts/Ubuntu-L.ttf');
}
body {
  background-color: #1d1d1d;
}
h1 {
  color: white;
  font-family: UbuntuG;
  font-size: 30;
}
p_Default {
  color: white;
  font-family: Arial;
  font-size: 16;
}
p_ANum {
  color: white;
  font-family: Arial;
  font-size: 10;
  text-align: left;
}
table,
th,
td {
  border: 1px solid #1d1d1d;
  border-spacing: 0;
  color: white;
  font-family: Arial;
  font-size: 16;
}
td {
  text-align: center;
  padding: 0;
  height: 43px;
}
ul {
  margin: 0px 0;
}
a {
  display: block;
  line-height: 43px;
}

<html>

<head>
  <title>Periodic Table</title>
  <meta content="??">
  <link rel="stylesheet" type="text/css" href="theme.css">
  <style></style>
</head>

<body>
  <h1>Periodic Table</h1>
  <center>

    <table width="1050px" height="500px">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
      </tr>
      <tr>
        <td bgcolor="#339933"><a href="www.google.com">H</a>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td bgcolor="#7e51a1">He</td>
      </tr>
      <tr>
        <td bgcolor="#f09609">Li</td>
        <td bgcolor="#996600">Be</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td bgcolor="#16aba8">B</td>
        <td bgcolor="#339933">C</td>
        <td bgcolor="#339933">N</td>
        <td bgcolor="#339933">O</td>
        <td bgcolor="#8ac03f">F</td>
        <td bgcolor="#7e51a1">Ne</td>
      </tr>
      <tr>
        <td bgcolor="#f09609">Na</td>
        <td bgcolor="#996600">Mg</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td bgcolor="#219fd9">Al</td>
        <td bgcolor="#16aba8">Si</td>
        <td bgcolor="#339933">P</td>
        <td bgcolor="#339933">S</td>
        <td bgcolor="#8ac03f">Cl</td>
        <td bgcolor="#7e51a1">Ar</td>
      </tr>
      <tr>
        <td bgcolor="#f09609">K</td>
        <td bgcolor="#996600">Ca</td>
        <td bgcolor="#df72ac">Sc</td>
        <td bgcolor="#df72ac">Ti</td>
        <td bgcolor="#df72ac">V</td>
        <td bgcolor="#df72ac">Cr</td>
        <td bgcolor="#df72ac">Mn</td>
        <td bgcolor="#df72ac">Fe</td>
        <td bgcolor="#df72ac">Co</td>
        <td bgcolor="#df72ac">Ni</td>
        <td bgcolor="#df72ac">Cu</td>
        <td bgcolor="#df72ac">Zn</td>
        <td bgcolor="#219fd9">Ga</td>
        <td bgcolor="#16aba8">Ge</td>
        <td bgcolor="#16aba8">As</td>
        <td bgcolor="#339933">Se</td>
        <td bgcolor="#8ac03f">Br</td>
        <td bgcolor="#7e51a1">Kr</td>
      </tr>
      <tr>
        <td bgcolor="#f09609">Rb</td>
        <td bgcolor="#996600">Sr</td>
        <td bgcolor="#df72ac">Y</td>
        <td bgcolor="#df72ac">Zr</td>
        <td bgcolor="#df72ac">Nb</td>
        <td bgcolor="#df72ac">Mo</td>
        <td bgcolor="#df72ac">Tc</td>
        <td bgcolor="#df72ac">Ru</td>
        <td bgcolor="#df72ac">Rh</td>
        <td bgcolor="#df72ac">Pd</td>
        <td bgcolor="#df72ac">Ag</td>
        <td bgcolor="#df72ac">Cd</td>
        <td bgcolor="#219fd9">In</td>
        <td bgcolor="#219fd9">Sn</td>
        <td bgcolor="#16aba8">Sb</td>
        <td bgcolor="#16aba8">Te</td>
        <td bgcolor="#8ac03f">I</td>
        <td bgcolor="#7e51a1">Xe</td>
      </tr>
      <tr>
        <td bgcolor="#f09609">Cs</td>
        <td bgcolor="#996600">Ba</td>
        <td bgcolor="#ed1790">*</td>
        <td bgcolor="#df72ac">Hf</td>
        <td bgcolor="#df72ac">Ta</td>
        <td bgcolor="#df72ac">W</td>
        <td bgcolor="#df72ac">Re</td>
        <td bgcolor="#df72ac">Os</td>
        <td bgcolor="#df72ac">Ir</td>
        <td bgcolor="#df72ac">Pt</td>
        <td bgcolor="#df72ac">Au</td>
        <td bgcolor="#df72ac">Hg</td>
        <td bgcolor="#219fd9">Tl</td>
        <td bgcolor="#219fd9">Pb</td>
        <td bgcolor="#219fd9">Bi</td>
        <td bgcolor="#16aba8">Po</td>
        <td bgcolor="#8ac03f">At</td>
        <td bgcolor="#7e51a1">Rn</td>
      </tr>
      <tr>
        <td bgcolor="#f09609">Fr</td>
        <td bgcolor="#996600">Ra</td>
        <td bgcolor="#e51e25">**</td>
        <td bgcolor="#df72ac">Rf</td>
        <td bgcolor="#df72ac">Db</td>
        <td bgcolor="#df72ac">Sg</td>
        <td bgcolor="#df72ac">Bh</td>
        <td bgcolor="#df72ac">Hs</td>
        <td bgcolor="#df72ac">Mt</td>
        <td bgcolor="#df72ac">Ds</td>
        <td bgcolor="#df72ac">Rg</td>
        <td bgcolor="#df72ac">Cn</td>
        <td bgcolor="#767676">Nh</td>
        <td bgcolor="219fd9">Fl</td>
        <td bgcolor="#767676">Mc</td>
        <td bgcolor="#767676">Lv</td>
        <td bgcolor="#767676">Ts</td>
        <td bgcolor="#767676">Og</td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>*</td>
        <td bgcolor="#ed1790">La</td>
        <td bgcolor="#ed1790">Ce</td>
        <td bgcolor="#ed1790">Pr</td>
        <td bgcolor="#ed1790">Nd</td>
        <td bgcolor="#ed1790">Pm</td>
        <td bgcolor="#ed1790">Sm</td>
        <td bgcolor="#ed1790">Eu</td>
        <td bgcolor="#ed1790">Gd</td>
        <td bgcolor="#ed1790">Tb</td>
        <td bgcolor="#ed1790">Dy</td>
        <td bgcolor="#ed1790">Ho</td>
        <td bgcolor="#ed1790">Er</td>
        <td bgcolor="#ed1790">Tm</td>
        <td bgcolor="#ed1790">Yb</td>
        <td bgcolor="#ed1790">Lu</td>
      </tr>
      <tr>
        <td></td>
        <td>**</td>
        <td bgcolor="#e51e25">Ac</td>
        <td bgcolor="#e51e25">Th</td>
        <td bgcolor="#e51e25">Pa</td>
        <td bgcolor="#e51e25">U</td>
        <td bgcolor="#e51e25">Np</td>
        <td bgcolor="#e51e25">Pu</td>
        <td bgcolor="#e51e25">Am</td>
        <td bgcolor="#e51e25">Cm</td>
        <td bgcolor="#e51e25">Bk</td>
        <td bgcolor="#e51e25">Cf</td>
        <td bgcolor="#e51e25">Es</td>
        <td bgcolor="#e51e25">Fm</td>
        <td bgcolor="#e51e25">Md</td>
        <td bgcolor="#e51e25">No</td>
        <td bgcolor="#e51e25">Lr</td>
      </tr>
    </table>

    <img src="assets/table.png" alt="Mountain View">
  </center>

</body>

</html>

Thank you very much aswell I really appreciate the new info. — Apocolyptic, Feb 01 '17 at 00:10

score 0 · Answer 3 · answered Jan 31 '17 at 23:00

0

Wrap all link text inside an <a> tag

<td bgcolor="#339933"><a href="www.google.com">H</a>

and add this to your css

  a {
      display: block;
      text-decoration: none;
      color: white;
      height:43px;
      line-height:43px;
    }

answered Jan 31 '17 at 23:00

gabehou

69
9

Thanks mate really appreciate it – Apocolyptic Feb 01 '17 at 00:07

HTML how do I make every entry in my table a button

3 Answers3