Проблема с выравниванием таблицы в HTML

#css #html

#css #HTML

Вопрос:

Я хочу добавить на свою страницу 4 таблицы, две слева (одна над другой) и две справа (одна над другой). В настоящее время я могу отображать только две таблицы в направлении выравнивания по левому краю, но когда я пытаюсь перейти к свойству выравнивания по правому краю в div as <table border="1" style="width:250px" align="right"> , я получаю искажения. Пожалуйста, найдите код, как показано ниже:-

Кто-нибудь может подсказать, что может быть причиной проблемы, я не хочу использовать CSS, но хочу выполнить только с помощью свойства выравнивания.

HTML

 <table border="1" style="width:250px">
  <tr><td>UK</td></tr>
  <tr><td>USA</td></tr>
  <tr><td>India</td></tr>
  <tr><td>Australia</td></tr>
  <tr><td>SouthAfrica</td></tr>
</table>

  <br/><br/><br/><hr size="2"><br/><br/>
  <p><b><u>Countries</u></b> </p> <br/>

<table border="1" style="width:250px" align="left">
  <tr><td>UK</td></tr>
  <tr><td>USA</td></tr>
  <tr><td>India</td></tr>
  <tr><td>Australia</td></tr>
  <tr><td>SouthAfrica</td></tr>
</table>

1. В каком порядке следует читать таблицы? верхний левый, нижний левый, верхний правый, нижний правый или верхний левый, верхний правый, нижний левый, нижний правый? ответ на этот вопрос повлияет на правильный ответ по соображениям доступности.

2. Кроме того, свойство выравнивания таблицы не поддерживается в html5 w3schools.com/tags/att_table_align.asp

Ответ №1:

я думаю, это то, что вам было нужно. проверьте здесь

 <table border="1" width="30%" style="float:left">

1. Хотя op сказал, что они не хотят использовать CSS, у них есть встроенные стили в их примере, и поэтому это лучший результат.

2. @Mauro в коде, приведенном в вопросе, также использует встроенный css 🙂

Ответ №2:

Вместо использования какого-либо свойства выравнивания просто используйте tables для выравнивания 4 таблиц.

Попробуйте это

 <table>
<tr>
    <td>
    <table border="1" style="width:250px">
      <tr><td>UK</td></tr>
      <tr><td>USA</td></tr>
      <tr><td>India</td></tr>
      <tr><td>Australia</td></tr>
      <tr><td>SouthAfrica</td></tr>
    </table>
    </td>
    <td>
    <table border="1" style="width:250px">
      <tr><td>UK</td></tr>
      <tr><td>USA</td></tr>
      <tr><td>India</td></tr>
      <tr><td>Australia</td></tr>
      <tr><td>SouthAfrica</td></tr>
    </table>
    </td>
</tr>
<tr>
    <td>
    <table border="1" style="width:250px">
      <tr><td>UK</td></tr>
      <tr><td>USA</td></tr>
      <tr><td>India</td></tr>
      <tr><td>Australia</td></tr>
      <tr><td>SouthAfrica</td></tr>
    </table>
    </td>
    <td>
    <table border="1" style="width:250px">
      <tr><td>UK</td></tr>
      <tr><td>USA</td></tr>
      <tr><td>India</td></tr>
      <tr><td>Australia</td></tr>
      <tr><td>SouthAfrica</td></tr>
    </table>
    </td>
</tr>
</table>

ДЕМОНСТРАЦИЯ ЗДЕСЬ

Ответ №3:

Вы можете сделать что-то вроде этого

 <table width="50%">
    <tr>
        <td>
            <table></table>
        </td>
    </tr>
    <tr>
        <td>
            <table></table>
        </td>
    </tr>
</table>
<table width="50%">
    <tr>
        <td>
            <table></table>
        </td>
    </tr>
    <tr>
        <td>
            <table></table>
        </td>
    </tr>
</table>