将表格添加到div

时间：2018-12-11 14:51:12

标签： html html-table tabs

我对html完全陌生，我需要一些帮助。

我想在div内添加一个表4x6。我正在使用代码生成选项卡，基本上每个选项卡上都会有一个表，可以在列表中添加超链接。有很多链接，所以我认为6列将使您更容易阅读，而不必向下滚动1列中的一个巨型列表。

任何帮助将不胜感激，因为我是新手

  <meta charset="utf-8" unselectable="on">
  <title unselectable="on">jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" unselectable="on">
  <script src="https://code.jquery.com/jquery-1.10.2.js" unselectable="on"></script>
  <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js" unselectable="on"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" unselectable="on">
  <script unselectable="on">
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>


 
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" unselectable="on">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist" unselectable="on">
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true" unselectable="on"><a href="#tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1" unselectable="on">General Links</a></li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false" unselectable="on"><a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2" unselectable="on">xerox.com Resources</a></li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false" unselectable="on"><a href="#tabs-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3" unselectable="on">Marketing and Sales Tools</a></li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-4" aria-labelledby="ui-id-4" aria-selected="false" aria-expanded="false" unselectable="on"><a href="#tabs-4" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-4" unselectable="on">Canadian Sales</a></li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-5" aria-labelledby="ui-id-5" aria-selected="false" aria-expanded="false" unselectable="on"><a href="#tabs-5" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-5" unselectable="on">Admin Support &amp; Training</a></li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-6" aria-labelledby="ui-id-6" aria-selected="false" aria-expanded="false" unselectable="on"><a href="#tabs-6" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-6" unselectable="on">Virtual Tools</a></li>
  </ul>
  <div id="tabs-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false" unselectable="on">
    <p unselectable="on">Test1	Test2	Test3	Test4	Test5</p>
  </div>
  <div id="tabs-2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;" unselectable="on">
    <p unselectable="on">Test2</p>
  </div>
  <div id="tabs-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;" unselectable="on">
    <p unselectable="on">Test3</p>
  </div>
  <div id="tabs-4" aria-labelledby="ui-id-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;" unselectable="on">
    <p unselectable="on">Test4</p>
  </div>
  <div id="tabs-5" aria-labelledby="ui-id-5" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;" unselectable="on">
    <p unselectable="on">Test5</p>
  </div>
  <div id="tabs-6" aria-labelledby="ui-id-6" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;" unselectable="on">
    <p unselectable="on">Test6</p>
  </div>
</div>

2 个答案:

答案 0 :(得分：0)

您可以只添加<table>...</table>标记，这应该可以帮助您入门。 使用表中的，如果要添加标题，请添加定义表标题的<th>...</th>标签。如果没有，您可以从<tr>...</tr>

开始

列数由th或tr中的<td>...</td>标签的数量定义... 

  <meta charset="utf-8" unselectable="on">
  <title unselectable="on">jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" unselectable="on">
  <script src="https://code.jquery.com/jquery-1.10.2.js" unselectable="on"></script>
  <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js" unselectable="on"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" unselectable="on">
  <script unselectable="on">
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>


 
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" unselectable="on">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist" unselectable="on">
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true" unselectable="on"><a href="#tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1" unselectable="on">General Links</a></li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false" unselectable="on"><a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2" unselectable="on">xerox.com Resources</a></li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false" unselectable="on"><a href="#tabs-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3" unselectable="on">Marketing and Sales Tools</a></li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-4" aria-labelledby="ui-id-4" aria-selected="false" aria-expanded="false" unselectable="on"><a href="#tabs-4" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-4" unselectable="on">Canadian Sales</a></li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-5" aria-labelledby="ui-id-5" aria-selected="false" aria-expanded="false" unselectable="on"><a href="#tabs-5" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-5" unselectable="on">Admin Support &amp; Training</a></li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-6" aria-labelledby="ui-id-6" aria-selected="false" aria-expanded="false" unselectable="on"><a href="#tabs-6" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-6" unselectable="on">Virtual Tools</a></li>
  </ul>
  <div id="tabs-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false" unselectable="on">
    <p unselectable="on">Test1	Test2	Test3	Test4	Test5</p>
    <table border="1">
        <tr>
            <td>test1</td>
            <td>test1</td>
            <td>test1</td>
            <td>test1</td>
            <td>test1</td>
            <td>test1</td>
        </tr>
        <tr>
            <td>test2</td>
            <td>test2</td>
            <td>test2</td>
            <td>test2</td>
            <td>test2</td>
            <td>test2</td>
        </tr>
        <tr>
            <td>test3</td>
            <td>test3</td>
            <td>test3</td>
            <td>test3</td>
            <td>test3</td>
            <td>test3</td>
        </tr>
        <tr>
            <td>test4</td>
            <td>test4</td>
            <td>test4</td>
            <td>test4</td>
            <td>test4</td>
            <td>test4</td>
        </tr>
    </table>
  </div>
  <div id="tabs-2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;" unselectable="on">
    <p unselectable="on">Test2</p>
  </div>
  <div id="tabs-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;" unselectable="on">
    <p unselectable="on">Test3</p>
  </div>
  <div id="tabs-4" aria-labelledby="ui-id-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;" unselectable="on">
    <p unselectable="on">Test4</p>
  </div>
  <div id="tabs-5" aria-labelledby="ui-id-5" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;" unselectable="on">
    <p unselectable="on">Test5</p>
  </div>
  <div id="tabs-6" aria-labelledby="ui-id-6" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;" unselectable="on">
    <p unselectable="on">Test6</p>
  </div>
</div>

答案 1 :(得分：0)

第一次在这里回答，所以我不确定如何使其漂亮，但是您可以添加带有“ table”标签的表，如果您希望标题有一个“ th”标签，则“ tr”每个表格行和每个表格的表格数据的“ td”。您可以使用“ a”标签和href进行超链接。我在下面拍了一个简单的示例，但是当我尝试以通常的方式对其进行格式化时，它不一样。 

<table>
<tr>
<td><a href="www.google.com">Goes to Google</a></td>
<td><a href="www.yahoo.com">Goes to Yahoo</a></td>
</tr>
<tr>
<td><a href="www.bing.com">Goes to Bing</a></td>
<td><a href="www.stackoverflow.com">Goes to Stack Overflow</a></td>
</tr>
</table>
相关问题
最新问题