Question

好吧基本上我想用HTML创建一个元素周期表，我希望列表中的每个元素都是一个转到不同URL的按钮。但是我希望整个扇区不仅可以点击文本。我也尝试了按钮功能，但这并没有使整个扇区可以点击。

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>

Answer 1

将[{1}}属性移至您的表格

将width添加到您的padding元素

<小时/> 这是一个工作示例：

＆＃13;

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

＆＃13;

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;
}

＆＃13;

Answer 2

为td元素提供固定的高度（43px）和a元素display: block，其中line-height与{{1}的高度相匹配元素。

td

td { text-align: center; padding: 0; height: 43px; } a { display: block; line-height: 43px; }元素上的display: block会导致它扩展a元素的整个宽度，而td / height会使文本垂直居中在元素内，同时使元素的全高可点击。

line-height

@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;
}

Answer 3

将所有链接文字换行到<a>代码

中

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

并将其添加到您的css

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

HTML如何在表格中为每个条目创建一个按钮

3 个答案: