Добавление таблицы в div - PullRequest
       9

Добавление таблицы в div

0 голосов
/ 11 декабря 2018

Я совершенно новичок в html и мне нужна помощь.

Я хочу добавить таблицу 4x6 внутри div.Я использую код для создания вкладок, и в основном на каждой вкладке будет таблица, где я могу добавить гиперссылки в список.Есть много ссылок, поэтому я подумал, что 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 голосов
/ 11 декабря 2018

При первом ответе здесь, так что я не уверен, как сделать это красиво, но вы можете добавить таблицу с тегом "table", если вы хотите, чтобы заголовки были, есть тег "th", "tr" длякаждая строка таблицы и "td" для данных таблицы, иначе говоря, каждая ячейка.Вы можете делать гиперссылки с тегом "a" и ссылкой.Ниже приведен краткий пример, но мне не нравится, когда я пытаюсь отформатировать его, как обычно.

<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>
0 голосов
/ 11 декабря 2018

Вы можете просто добавить <table>...</table> теги, которые помогут вам начать работу с таблицей.В таблице, если вы хотите добавить заголовки, добавьте теги <th>...</th>, которые определяют заголовки таблицы.Если нет, вы можете просто начать с строк: <tr>...</tr>

Количество столбцов определяется количеством тегов <td>...</td> в пределах th или tr ...

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