<table>【表 (Table)】

<style>
table.ex-1 { border: 2px black solid; width: 300px; height: 100px; }
table.ex-1 th { border: 2px red solid; }
table.ex-1 td { border: 2px blue solid; }

table.ex-2 { border-collapse: collapse; }
table.ex-2 th { border: 2px red solid; background-color: lightgray; }
table.ex-2 td { border: 2px blue solid; }
</style>

<p>スタイル未指定</p>
<table>
  <caption>表の見出し</caption>
  <tr><th>ヘッダセル<th>ヘッダセル</tr>
  <tr><th>ヘッダセル<td>データセル</tr>
</table>

<hr>
<p>border【境界線】指定</p>
<table class="ex-1">
  <caption>表の見出し</caption>
  <tr><th>ヘッダセル<th>ヘッダセル</tr>
  <tr><th>ヘッダセル<td>データセル</tr>
</table>

<hr>
<p>border-collapse:collapse【境界線を共有】・border【境界線】指定</p>
<table class="ex-2">
  <caption>表の見出し</caption>
  <tr><th>ヘッダセル<th>ヘッダセル<th>ヘッダセル</tr>
  <tr><th>ヘッダセル<td>データセル<td>データセル</tr>
  <tr><th>ヘッダセル<td>データセル<td>データセル</tr>
</table>

<style>
table.ex-3 { border-collapse:collapse; width:400px; }
table.ex-3 th { border: 1px black solid; background-color:lightgray; }
table.ex-3 td { border: 1px black solid; }
table.center2 td:nth-of-type(2) { text-align:center; } /* ２列目のtd */
table.right3  td:nth-of-type(3) { text-align:right; }  /* ３列目のtd */
</style>

<table class="ex-3 center2 right3">
  <tr><th>ヘッダセル<th>ヘッダセル<th>ヘッダセル<th>ヘッダセル</tr>
  <tr><th>ヘッダセル<td>左寄せ<br>(デフォルト)<td>中央寄せ<td>右寄せ</tr>
  <tr><th>ヘッダセル<td>左寄せ<br>(デフォルト)<td>中央寄せ<td>右寄せ</tr>
</table>

<style>
table.ex-4 { border-collapse:collapse; }
table.ex-4 th { border: 1px black solid; }
table.ex-4 td { border: 1px black solid; }
</style>

<table id="exjs" class="ex-4">
  <tr><th>セル要素<th>A<th>B</tr>
  <tr><td>なし<td style="background-color:cyan"><td></tr>
  <tr><td>A<td>●<td></tr>
  <tr><td>B<td><td>●</tr>
  <tr><td>A + B<td>●<td>●</tr>
</table><br>

<fieldset style="display:inline-block">
  <legend>行の表示 / 非表示</legend>
  <label><input name="filter" type="radio" onchange="changeFilter(-1);" checked>全て</label>
  <label><input name="filter" type="radio" onchange="changeFilter(1);"> A </label>
  <label><input name="filter" type="radio" onchange="changeFilter(2);"> B </label>
</fieldset>

<fieldset style="display:inline-block">
  <legend>セル要素スタイル</legend>
  行：<select id="targetRow"><option>2<option>3<option>4<option>5</select>
  列：<select id="targetCol"><option>2<option>3</select>
  <button type="button" onclick="changeBack();">セル要素背景 変更</button>
</fieldset>

<button type="button" onclick="changeData();">セル要素参照：セル要素 変更</button>
<br>

<script>
/**
 * チェック列のセル要素に内容がある行のみ表示
 * @param {number} col チェック列 (0～)
 */
function changeFilter(col) {
  var table = document.getElementById("exjs"); // 表要素 取得
  var rows = table.rows; // 行数取得
  var hidden;
  for (var row = 1; row < rows.length; row++) { // ２行目から
    if (0 <= col) {
      if (rows[row].cells[col].innerHTML != "") { // セル要素の内容チェック
        hidden = false; // 対象行 表示
      }
      else {
        hidden = true; // 対象行 非表示
      }
    }
    else {
      hidden = false; // 全て表示
    }
    rows[row].hidden = hidden; // 行 表示 / 非表示
  }
}

/**
 * ２行目以降の２列目と３列目のセル要素変更
 */
function changeData() {
  var table = document.getElementById("exjs"); // 表要素 取得
  var rows = table.rows; // 行数取得
  for (var row = 1; row < rows.length; row++) { // ２行目から
    for (var col = 1; col <= 2; col++) { // ２列目と３列目
      var cell = rows[row].cells[col];
      var data = cell.innerHTML; // セル要素の内容 取得
      if (data != "") {
        if (data == "●") {
          data = "○";
        }
        else {
          data = "●";
        }
        cell.innerHTML = data; // セル要素の内容 設定
      }
    }
  }
}

/**
 * 指定行・列のセル要素の背景色 変更
 */
function changeBack() {
  var table = document.getElementById("exjs"); // 表要素 取得
  var row = document.getElementById("targetRow").value; // 指定行 取得
  var col = document.getElementById("targetCol").value; // 指定列 取得
  var cell = table.rows[row - 1].cells[col - 1];
  var backColor = cell.style.backgroundColor;
  if (backColor == "") {
    backColor = "cyan";
  }
  else {
    backColor = "";
  }
  cell.style.backgroundColor = backColor;
}
</script>