• 締切済み

検索機能とページ送りのできるテーブルの作成について

お世話になります <input type="text" name="search" id="search"> <table width="800" border="0" id="item" name="item">  <thead>   <tr>    <th></th>   </tr>  </thead>  <tbody>   <tr>    <td>     <a href="hoge.html">      <img src="hoge.jpg">     </a>     <b>ほげ</b>    </td>   </tr>   <tr>    <td>     <a href="hogehoge.html">      <img src="hogehoge.jpg">     </a>     <b>ほげほげ</b>    </td>   </tr>  </tbody> </table> ※本来はTR要素がもっと沢山増えます。 このテーブルに対して表示件数が5件を超えたらページ送りができるようにし、テキストボックスの内容で検索をかけて表示をしたいのですが、何か良い解決案はありませんか? 一応自分でもいろいろ調べて http://d.hatena.ne.jp/Rewish/20090703/1246615343 http://ponk.jp/?p=2413 を共存させるようとしてみたのですがどうもうまく動作しませんでした。

みんなの回答

回答No.8

> No.1 お礼 > 検索結果がテーブルのデータ全件に対してではなく、ページ送りのために表示されたデータ(私の場合は5件)の中の非該当項目が見えなくなるだけだったので、検索結果に引っかからないデータの分を引いたテーブルの項目数でページ送りが実装できるようにしたいのです。 これはCGIで処理すべき内容では? もしくは5件表示 -> ページ送りの時は全件を消してAjaxで次の5件を取得、表示 かと。 <div id="output"><table>略</table></div> <a onclick="next()">次へ</a> function next(){ // ajaxでデータを取得(略) // responseTextはCGIアプリでHTMLに整形済み document.getElementById('output').innerHTML=xhr.responseText; // またはJSONやCSV、XMLからHTML-Elementに変換する var elmentdata= xhr.responseTextなどをdocument.createElement()などでごにょごにょしたもの var output=document.getElementById('output'); output.replaceChild(elementdata, output.firstChild); }

回答No.7

全角空白は、半角空白になおしてください。 みすがあったら、じぶんでなおしてね。 いか、むししてください。 >jQuery使えばそんなに長いコードにならないです。 わくわく。わくわく。わくわく。わくわく。

回答No.6

//その3 document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/  'keyup', (function ( ) {   var timerId = null;   return function ( evt ) {    var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;        if( 'key' === e.id ) { //ユーザーネームのフォーム要素のid     timerId && clearTimeout( timerId );     timerId = setTimeout( function ( ) { itemList.find( e.value ); }, 250 );    }   };  })(), false ); </script> //もじすうのせいげんは、なんとかならんものかなぁ~~~ //このあいだのしつもんにこたえてみたものをつぎたしました //はんかくすうじの「12」と、ゆっくりうちこめば、いみがわかるかな? //ひつようないとおもうけど^^;

回答No.5

//その2 Hoge.prototype.nextTable = function ( n ) {  n = n || 1;  this.page = ( this.page + n ) % this.tbody.length;  return this.viewTable( ); }; Hoge.prototype.previousTable = function ( n ) {  n = n || 1;  var len = this.tbody.length;  this.page = ( len + this.page - ( n % len ) ) % len;  return this.viewTable( ); }; Hoge.prototype.viewTable = function ( ) {  var n = this.page + 1;  for( var c = 1, o; o = this.tbody[c]; c++ )   o.style.display = c == n ? 'table': 'none';  return this.page; }; Hoge.prototype.makeViewTable = function ( ) {  this.resetViewTable();  var tb = this.tbody[1];  if( !tb ) return false;    var trs = tb.childNodes, tr, tgtTbody = null;  while( tr = trs[ this.vmax ] ) {   if( tgtTbody && tgtTbody.childNodes.length === this.vmax ) {    this.table.appendChild( tgtTbody );    tgtTbody = null;   }   if( !tgtTbody ) {    tgtTbody = document.createElement( 'tbody' );   }      tgtTbody.appendChild( tr );  }  if( tgtTbody )   this.table.appendChild( tgtTbody );  return this.page = 0; }; Hoge.prototype.find = function ( str, no ) {  this.resetViewTable( true );  var tgtTRs = this.tbody[0].childNodes;  var addTbody = document.createElement( 'tbody' );  var tr, cnt = 0, td, txt;    no = 'number' === typeof no ? no: 0;    while( tr = tgtTRs[ cnt++ ] ) {   td = tr.childNodes[ no ];   txt = td./*@if (@_jscript) innerText @else@*/ textContent /*@end@*/;      if( -1 < txt.indexOf( str ) || '' == str )    addTbody.appendChild( tr.cloneNode( true ) );  }  this.table.appendChild( addTbody );  this.makeViewTable();  this.viewTable(); } var itemList = new Hoge( 'item' );

回答No.4

じぶんにぴったりのふんどしがないので、いとをつぐむところから!って。なんかさぁ~ ハードルをあげられたような・・。 そしてながくなるたび、ミスがうじゃうじゃ? ながいので、きっとぶんかつです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <body> <form action="#" id="test"> <p> keyWord: <input type="text" size="20" id="key"> <input type="button" value="previous" onclick="itemList.previousTable()"> <input type="button" value="next" onclick="itemList.nextTable()"> </p> </form> <table width="800" border="1" id="item"> <thead> <tr> <th>Item List</th> </tr> </thead> <tbody> <tr><td>ほげ1</td></tr> <tr><td>ほげ2</td></tr> <tr><td>ふが1</td></tr> <tr><td>ふが2</td></tr> <tr><td>ふが3</td></tr> <tr><td>ふが4</td></tr> <tr><td>ほげ3</td></tr> <tr><td>ほげ4</td></tr> <tr><td>ほげ5</td></tr> <tr><td>ほげ6</td></tr> <tr><td>ほげ7</td></tr> <tr><td>ほげ8</td></tr> <tr><td>ほげ9</td></tr> <tr><td>ほげ10</td></tr> <tr><td>ほげ11</td></tr> <tr><td>ほげ12</td></tr> <tr><td>ほげ13</td></tr> <tr><td>ほげ14</td></tr> <tr><td>ほげ15</td></tr> <tr><td>ほげ16</td></tr> </tbody> </table> <script type="text/javascript"> //@cc_on var Hoge = function ( ) {  this.vmax = 5;  this.init.apply( this, arguments ); }; Hoge.prototype.init = function ( id ) {  var e = document.getElementById( id );  this.table = e;  this.tbody = e.getElementsByTagName( 'tbody' );  var tbody = this.tbody[0];  var trs = tbody.childNodes;  var cnt = 0;  var tr, tds, td;    for(; tr = trs[ cnt ]; ) {   if( 1 !== tr.nodeType )    tbody.removeChild( tr );   else {    tds = tr.childNodes;    for( var cnt2 = 0; td = tds[ cnt2 ]; cnt2++ ) {     if( 1 !== td.nodeType )      tr.removeChild( td );    }    cnt++;   }  }    tbody.style.display = 'none';    this.page = 0;  this.resetViewTable(); }; Hoge.prototype.resetViewTable = function ( sw ) {  var b;  var t = sw ? 1: 2;  while( b = this.tbody[ t ] )   this.table.removeChild( b );  this.page = -1;  return this.page; };

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

george723様が最初に調べた2つサンプルサイトにあるjavascript を共存させて実現できます。 ちょっと、いんちきしています。 検索マッチした時<tr>タグに勝手にhits属性なるものをjQuryで付加し、 マッチした<tr>のみ、ページ送りの対象要素としちゃってます。 (firefox3.5とIE8.0でうまくいきました。) (見本) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.4.2.min.js"></script> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <title></title> <style type="text/css"> td, th { border: 1px solid black; padding: 1px; } #prev, #next { color: red; cursor: pointer; } </style> <script type="text/javascript" charset="utf-8"> <!-- $(function() { var tr = $('tr','#item tbody'); var page = 0; $.fx.off = true; $('#search').keyup(function(){ $("#navi").empty(); var query = $(this).val().replace(/^\s+|\s+$/g,'').replace(/\s+/g,' ').split(' '); if (query[0] === '') { tr.show(); return; } tr.each(function(){ var self = $(this); var itemName = $('td:nth-child(1)',self).text(); for(var i=0,len=query.length;i<len;i++){ if (!itemName.match(new RegExp(query[i],'i'))){ self.hide(); self.removeAttr("hit"); return; }else{ self.attr("hit","hit"); return; } } self.show(); self.removeAttr("hit"); }); var hits=$("tr[hit='hit']"); if(hits.length > 5){ $("<span id=\"prev\"><</span><span id=\"page\"></span><span id=\"next\">></span>").appendTo("#navi"); $('#prev').click(function() { if (page > 0) { page--; draw(hits); } }); $('#next').click(function() { if (page < ($(hits).size()) / 5 - 1) { page++; draw(hits); } }); draw(hits); } }); function draw(hits) { $('#page').html(page + 1); hits.hide(); hits.slice(page*5,page*5+5).show(); } }); // --> </script> </head> <body> <input type="text" id="search"> <div id="navi"></div> <table width="800" border="0" id="item"> <thead><tr><th></th></tr> </thead> <tbody> <tr><td>ほげ1</td></tr> <tr><td>ほげ2</td></tr> <tr><td>ふが1</td></tr> <tr><td>ふが2</td></tr> <tr><td>ふが3</td></tr> <tr><td>ふが4</td></tr> <tr><td>ほげ3</td></tr> <tr><td>ほげ4</td></tr> <tr><td>ほげ5</td></tr> <tr><td>ほげ6</td></tr> <tr><td>ほげ7</td></tr> <tr><td>ほげ8</td></tr> <tr><td>ほげ9</td></tr> <tr><td>ほげ10</td></tr> <tr><td>ほげ11</td></tr> <tr><td>ほげ12</td></tr> <tr><td>ほげ13</td></tr> <tr><td>ほげ14</td></tr> <tr><td>ほげ15</td></tr> <tr><td>ほげ16</td></tr> </tbody> </table> </body> </html> あまりスマートじゃないです。とってつけたような、 人のふんどしを集めて別のふんどしにしているような、 どうせなら、 No2.様の回答の 「ことば(かな)」の部分を 最初から作りなおした方がよいでしょう。jQuery使えばそんなに 長いコードにならないです。

回答No.2

プログラムがかなりながくなりそうなので、ことば(かな)で。 <tbody>は、ふくすうあってもよいので、さいしょのtbody[0]をデータぶぶんとして非ひょうじにする けんさくじょうけんがみたされたものを、tbody[1]をつくりそれにコピーする。 tbody[1]のtrのぎょうすうをかぞえ、5ぎょうをこえたら、tbody[2]に さらにふえたなら、[3][4]とつくり、それぞれにいどうする。 ひょうじには、tbody[0]いがいを、きりかえる というのはどうだろう?

noname#111181
noname#111181
回答No.1

jQueryを使って実装することが出来ます。 ページ送り:http://ponk.jp/?p=2413 簡易検索:http://f32.aaa.livedoor.jp/~azusa/?t=ajax&p=jquery_plugin_tablesort#a_quicksearch

george723
質問者

お礼

ご回答ありがとうございます。 指定していただいたurlのページ送りと簡易検索を実装すると、検索結果がテーブルのデータ全件に対してではなく、ページ送りのために表示されたデータ(私の場合は5件)の中の非該当項目が見えなくなるだけだったので、検索結果に引っかからないデータの分を引いたテーブルの項目数でページ送りが実装できるようにしたいのです。 説明不足で申し訳ありませんでした

関連するQ&A

  • tableを自動作成・追加できるプログラムを探しているのです・・

    <table> <tbody> <tr> <td colspan="9" align="center" </TD></td> </tr> <tr> <td colspan="9" <A href="http:// target=" _blank"></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td rowspan="3"></td> <td></td> <td><img src=".jpg"></td> <td></td> <td> <table> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> </td> <td></td> <td><img src=".jpg"></td> <td><img src=".jpg"></td> <td></td> </tr> <tr> <td></td> <td><img src=".jpg"></td> <td></td> <td> <table> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> </td> <td></td> <td><img src=".jpg"></td> <td><img src=".jpg"></td> <td></td> </tr> <tr> <td></td> <td><img src=".jpg"></td> <td></td> <td> <table> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> </td> <td></td> <td><img src=".jpg"></td> <td><img src=".jpg"></td> <td></td> </tr> <tr> <td><img src=".jpg"></td> </tr> </tbody> </table> こんなtableを作成し(tdには数値・文字列・画像が入ります)一つのhtmlファイルに一ヶ月に10個ほど手動でtableを追加しています。 これを入力フォームより数値や文字列・参照画像を入力し、月ごとのhtmlにしてるので、指定したhtmlに反映させるようなプログラム(cgi? javascript? PHP?)をご存じの方いらっしゃいませんでしょうか?

  • JavaScriptによる表のソート機能付与

    avaScriptでソートに関する質問です。jQueryを使って簡潔な記述で実現したいのですが、tablesoterなどのプラグインは使用不可の条件で、Tableのデータを並び替える方法がなかなか見いだせません。例えば、以下のようなTableにソート機能を持たせるにはどのようなJavaScriptの記述が考えられるでしょうか? <thead>の<img>の一方をクリックしたら昇順、もう一方をクリックしたら降順にしたいです。押された場所の項目に応じてそのように並び替えをしたいです。なお、ソートは<tbody>の部分のみでOKです。 <table> <thead> <tr> <th>年月<img src="01.gif"> <img src="02.gif"></th> <th>更新数<img src="01.gif"> <img src="02.gif"></th> <th>聴取率<img src="01.gif"> <img src="02.gif"></th> <th>平均金額<img src="01.gif"> <img src="02.gif"></th> <th>滞在時間<img src="01.gif"> <img src="02.gif"></th> </tr> </thead> <tbody> <tr> <td>2010年08月</td> <td>0</td> <td>22%</td> <td>30円</td> <td>0</td> </tr> <tr> <td>2010年07月</td> <td>2</td> <td>100.00%</td> <td>180円</td> <td>27日 +05:17</td> </tr> <tr> <td>2010年09月</td> <td>2</td> <td>100.00%</td> <td>190円</td> <td>27日 +05:17</td> </tr> </tbody> <tfoot> <tr> <td>合計</td> <td >2</td> <td>21.25%</td> <td>400円</td> <td>57日 +12:10</td> </tr> </tfoot> </table> 以上です。HTMLをいじるのはありです。 どうかよろしくお願い致します。

  • スワップイメージ+リンクの変更

    まったくの素人ですが、お教えください。 以下のようなテーブルにそれぞれ画像とリンクをつけようとしています。 <table> <tr> <td rowspan="3"><a href="hoge.html"><img src="hoge.jpg"></a></td> <td><a href="a.html"><img src="a.jpg"></a></td> </tr> <tr><td><a href="b.html"><img src="b.jpg"></a></td></tr> <tr><td><a href="c.html"><img src="c.jpg"></a></td></tr> </table> a.jpg/b.jpg/c.jpg(以下、abc) がそれぞれメニューバーの項目で、 hoge.jpgを大きなメインの画面にしたいと思っています。 このとき、abcのいずれかをマウスオーバーするたびに、それぞれのイメージがhogeのエリアにスワップされ、かつそれぞれの項目のリンク(a.html/b.html/c.html)がhoge.htmlと置き換わるようなjavascriptを作りたいと考えています。 イメージのスワップだけならいくつも見つけることができたのですが、イメージとリンクが両方ともスワップされるようなものを、見つけることができませんでした。もしそのようなjavascriptがweb上にありましたら、お教えください。

  • スワップイメージ+リンクの変更 その2

    たびたび御世話になります。 以前、QNo.4078462で質問させていただいた者です。 http://oshiete1.goo.ne.jp/qa4078462.html 質問させていただいた問題は解決できたのですが、修正が必要となりました。 自分でなんとか解決してみようと試みたのですが、 少し時間が無いために改めて質問させてください。 以下のようなテーブルにそれぞれ画像とリンクをつけようとしています。 <table> <tr> <td rowspan="3"><a href="hoge.html"><img src="hoge.jpg"></a></td> <td><a href="a.html"><img src="a.jpg"></a></td> </tr> <tr><td><a href="b.html"><img src="b.jpg"></a></td></tr> <tr><td><a href="c.html"><img src="c.jpg"></a></td></tr> </table> a.jpg/b.jpg/c.jpg(以下、abc) がそれぞれメニューバーの項目で、 hoge.jpgを大きなメインの画面にしたいと思っています。このとき、 1. abcのいずれかをマウスオーバーするたびに、それぞれのイメージがhogeのエリアにスワップされる 2. abcからマウスを外すとhoge.jpgに戻る の2点を満たすjavascriptを御教授ください。 2. の条件がある分、以前と違ってリンクまでスワップされる必要はありません。

  • tableのヘッダを固定したい

    IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。  ・width: ?%として大きさを可変にする。  ・ヘッダを固定する。  ・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>

  • マウスカーソルを乗せた時にテーブルの行の色を変える

    マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて 以下のようにCSSとHTMLを書いてみました。 しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。 【CSS】 table tr:hover { background:red; } 【HTML】 <html> <head> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <link rel="stylesheet" href="test.css" type="text/css"> <script> </script> </head> <body> <table border="1"> <thead> <tr> <th>名前</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>3000</td> </tr> <tr> <td>xyz</td> <td>100</td> </tr> <tr> <td>myk</td> <td>20000</td> </tr> </tbody> </table> </body> </html>

    • ベストアンサー
    • CSS
  • テーブルの行操作について

    下記のJavaScriptの操作で質問があります。 ボタンを押すたびに1行目が最後に追加されていくと考えたのですが、 実際の動作では1行目が複製されず、行の入れ替えになってしまいます。 cloneNodeすれば行の追加になるのはわかりますが、なぜ下記の操作で行の入れ替えになるのでしょうか? <html> <head> <title>テーブルテスト</title> <script type="text/javascript"> <!-- function testFunction() { tableBody.appendChild(tableBody.childNodes(0)); } --> </script> </head> <body> <table border="1"> <thead> <tr><th>A</th><th>B</th><th>C</th></tr> </thead> <tbody id="tableBody"> <tr><td>foo</td><td>bar</td><td>hoge</td></tr> <tr><td>abc</td><td>def</td><td>ghij</td></tr> </tbody> </table> <input type="button" value="テスト" onclick="testFunction()" /> </body> </html>

  • Perlテーブル要素の抜粋について

    はじめまして、 わからないことがあるので教えてください;; <table border="1">#1個目 <tr> <th>No</th> <td>1</td> </tr> <tr> <th>名前</th> <td>太郎</td> </tr> <tr> <th>ランク</th> <td>A</td> </tr> </table> <table border="1">#2個目 <tr> <th>住所</th> <td>東京都渋谷...</td> </tr> <tr> <th>電話番号</th> <td>000-0000-000</td> </tr> </table> <table border="1">#3個目 <tr> <th>試験日</th> <th>科目</th> <th>参考資料</th> <th>点数</th> <th>順位</th> </tr> <tr> <td>2015/6/25</td> <td>国語</td> <td><a href="kyouikunet.html"><img src="kokugo.gif" alt="kokugo"></a></td> <td>70</td> <td>12</td> </tr> <tr> <td>2015/8/25</td> <td>数学</td> <td><a href="kyouikunet.html"><img src="sugaku.gif" alt="sugaku"></a></td> <td>80</td> <td>5</td> </tr> <tr> <td>2015/10/25</td> <td>理科</td> <td><a href="kyouikunet.html"><img src="rika.gif" alt="rika"></a></td> <td>75</td> <td>8</td> </tr> <tr> <td>2015/12/25</td> <td>英語</td> <td><a href="kyouikunet.html"><img src="eigo.gif" alt="eigo"></a></td> <td>96</td> <td>2</td> </tr> </table> このような表があり、 $KojinSeisekiTroに入っており その中の テーブル1番目とテーブル3番目の情報の [tb]内の文字列をカンマ区切りで保存したいのですが どのようにするのかわからないです・・・ 例) この表ですと 1,太郎,A 2015/6/25,国語,70,12 2015/8/25,数学,80,5 2015/10/25,75,8 2015/12/25,96,2 . . . 以下、行の最終は不明なので、最後までという形 を、Tro.txtに保存したいです どうかご教示お願い致します;;

    • ベストアンサー
    • Perl
  • <td> 内のテーブルを上寄せにするには?

    すみません教えていただけますか? 初心者です。 このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。 上寄せにしたいのですが、どのようにすればよいでしょうか? よろしくお願いします。 <table width="960" border="1"> <tr> <td width="160"> <!-- TABLE A --> <table width="160" border="1"> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> </table> </td> <td width="800" height="1200" border="1"> &nbsp; </td> </tr> </table>

    • ベストアンサー
    • HTML
  • 2つのテーブルの幅を一致させたい

    以下のHTMLで、2つのテーブルのセル幅が一致しません。 JavaScriptではヘッダのセル幅をボディのセル幅に合わせています。 ボディ部分の文字列をすべて日本語にするとうまくいくのですが・・・ JavaScriptというよりはHtmlの問題な気がしますが、よろしくお願いします。 jqueryを使用しています。 <html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { headerTableWidthFit(); }); $( window ).resize(function(){ headerTableWidthFit(); }); function headerTableWidthFit() { var i = 0; $('#resultBodyTable table tbody tr:eq(0) td').each(function() { $('#resultHeaderTable table th').eq(i).width($(this).width()); i++; }); } </script> </head> <body> <div id="container"> <div id="resultHeaderTable" class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> <th>お</th> <th>か</th> <th>き</th> <th>く</th> </tr> </thead> </table> </div> <div id="resultBodyTable" class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> <td>お</td> <td>か</td> <td>き</td> <td>く</td> </tr> </tbody> </table> </div> </div> </body> </html>

専門家に質問してみよう