<table>【表 (Table)】

【標準】
<table border="1" style="width: 400px; height: 100px">
  <caption>表の見出し</caption>
  <tr><th>ヘッダセル<th>ヘッダセル</tr>
  <tr><th>ヘッダセル<td>データセル</tr>
</table>

【枠の指定】
<style>
.ex { border-collapse: collapse; }
.ex th { border: 2px red solid; background-color: lightgray; }
.ex td { border: 2px blue solid; }
</style>

<table class="ex">
  <caption>表の見出し</caption>
  <tr><th>ヘッダセル<th>ヘッダセル<th>ヘッダセル</tr>
  <tr><th>ヘッダセル<td>データセル<td>データセル</tr>
  <tr><th>ヘッダセル<td>データセル<td>データセル</tr>
</table>

【列毎のテキスト配置】
<style>
.ex2 { border-collapse: collapse; width: 450px; }
.ex2 th { background-color: lightgray; }
table.center1 td:nth-of-type(1) { text-align: center; } /* 1つ目のtd */
table.right2  td:nth-of-type(2) { text-align: right; }  /* 2つ目のtd */
</style>

<table border="1" class="ex2 center1 right2">
  <tr><th>ヘッダセル<th>ヘッダセル<th>ヘッダセル</tr>
  <tr><th>ヘッダセル<td>中央寄せ<td>右寄せ</tr>
  <tr><th>ヘッダセル<td>中央寄せ<td>右寄せ</tr>
</table>

【JavaScript 参照】
<table id="exjs" border="1" style="border-collapse:collapse;">
<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>

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

セル要素	A	B
なし
A	●
B		●
A + B	●	●

行の表示 / 非表示

全て A B

セル要素スタイル

行：2345 列：23セル要素背景 変更

セル要素参照：セル要素 変更