HTMLとCSSでシンプルな表を作る!!


記事が良かったら画面右下のGoodボタンを押してください。
・にほんブログ村に登録しています
   にほんブログ村 IT技術ブログ HTML/CSSへ      にほんブログ村 PC家電ブログへ
にほんブログ村 にほんブログ村

 

テーマ
◆HTMLとCSSでシンプルな表を作る!!

完成物

1項目 1内容
2項目 1内容
3項目 3内容
4項目 4内容
5項目 5内容
6項目 6内容
7項目 7内容

 

サンプルコード

HTML/CSS
<table>
<tbody>
<tr>
<th>1項目</th>
<td>1内容</td>
</tr>
<tr>
<th>2項目</th>
<td>1内容</td>
</tr>
<tr>
<th>3項目</th>
<td>3内容</td>
</tr>
<tr>
<th>4項目</th>
<td>4内容</td>
</tr>
<tr>
<th>5項目</th>
<td>5内容</td>
</tr>
<tr>
<th>6項目</th>
<td>6内容</td>
</tr>
<tr>
<th>7項目</th>
<td>7内容</td>
</tr>
</tbody>
</table>
<style><!--
table{
  width: 100%;
  border-collapse: collapse;
}
table tr{
  border-bottom: solid 2px white;
}
table tr:last-child{
  border-bottom: none;
}
table th{
  position: relative;
  text-align: left;
  width: 30%;
  background-color: #b9c42f;
  color: black;
  text-align: center;
  padding: 10px 0;
}
table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #008000;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
table td{
  text-align: left;
  width: 70%;
  text-align: center;
  background-color: #eee;
  padding: 10px 0;
}
--></style>

あわせて読みたい

webdevopment.hatenablog.com