Как вывести данные «столбиками»?

Question

[Алексей]

Т.е. чтобы цифры начинались с одинаковой позиции.

Какие есть методы кроме таблиц?

Comments

[Astrohas]

А чем вам таблицы не нравятся?

[Алексей]

Хасан Истамкулов: У меня почему то не получается заставить работать всякие атрибуты - ширина ячеек, объединение и тд. Не понимаю почему, возможно надо еще что то прописывать в CSS.

[Astrohas]

Алексей: https://jsfiddle.net/smhh8xvh/ ?

Answer 1

[Андрей Токмаков]

Да вариантов много, например так:
codepen.io/anon/pen/MpLzBQ

Comments

[Алексей]

Спасибо. А можно
или обойтись без CSS
или перенести в HTML
или сделать так, чтобы CSS совершенно точно не оказал влияние случайно на что то еше?

(В таблицах, по всей видимости,такая же проблема - нужно что то писать в CSS чтобы атрибуты заработали)

[Андрей Токмаков]

Алексей: А Вам не кажется, что стоит хотя бы что то почитать про разметку, прежде чем пытаться сделать? CSS для этого и сделан, голый html не умеет читать Ваши мысли и располагать элементы как Вы хотите.

[Алексей]

Андрей Токмаков: где читать?
htmlbook.ru/html/table ни слова при CSS для таблиц

[Андрей Токмаков]

Алексей: htmlbook.ru/content/tablitsy-i-stili

[Андрей Токмаков]

Алексей: htmlbook.ru/samlayout/verstka-s-pomoshchyu-tablits...

и т.д.

Answer 2

[Олег]

Простой вариант https://jsfiddle.net/Politonius/1a0r57tz/

Comments

[Алексей]

По какому принципу span относится именно к test?
Может где то еще есть test2 с другими параметрами span?

[Олег]

)) нет. span дочерний элемент, расположен справа

[Алексей]

Олег: я про это

#test{
  margin:0 auto;
  width:150px;
}
span{
  float:right;
}

[Андрей Токмаков]

Олег: он имеет ввиду что у него 0 знаний в этой сфере и ему нужно готовое решение, т.к. что то подправить или переделать он сам не сможет, даже что то элементарное

[Алексей]

Андрей Токмаков: и что? я не собираюсь становиться профи и составлять вам конкуренцию, мне просто надо сделать небольшие доработки на своем единственном сайте... что в этом плохого?

[Андрей Токмаков]

Алексей: Плохое то, что Вы собираетесь делать то, что не умеете и не хотите учиться. Вы хотите готового решения, но его Вам ни кто не даст, во-первых потому что тут не фриланс и во-вторых, для того что бы переделать что то, надо видеть что имеется, а этого нет в вашем вопросе

[Алексей]

Андрей Токмаков: selftrips.ru/stranicy-o-puteshestviyakh/gde-my-sey... это откуда картинка. Но вопрос действительно вылился в пересечении стилей таблиц.
Как сделать отдельный стиль для отдельной таблицы?

[Андрей Токмаков]

Алексей: добавить класс таблице и прописывать стили таблице с этим классом

[Алексей]

Андрей Токмаков: Как?

<table width="100%" cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td width="500">Левая колонка</td><td>Правая колонка</td>
     <td>Правая колонка</td>
     <td>Правая колонка</td>
     <td>Правая колонка</td>
     <td>Правая колонка</td>
     <td>Правая колонка</td>
     <td>Правая колонка</td>
     <td>Правая колонка</td>
     <td>Правая колонка</td>
   </tr>
  </table>

Что здесь добавить, что в CSS?
Можно непосредственно в HTML добавить?

[Андрей Токмаков]

<table class="country" width="100%" cellspacing="0" cellpadding="4" border="1">

А потом прописывать стили для .country

[Андрей Токмаков]

Алексей: или добавить class="country__right-col" нужному столбцу и писать стили для .country__right-col соответственно

[Андрей Токмаков]

Алексей: htmlbook.ru/samcss/klassy

[Алексей]

Андрей Токмаков:
1.где и как прописать прописывать стили для .country?
2.разве не становится бессмысленным в <table> писать атрибуты если они будут где то описаны в.country

[Андрей Токмаков]

Алексей: выше ссылку дал на статью про классы

[Алексей]

Андрей Токмаков: не получается, даже при проверке не работает, почему?

<style>
  table.mytable { 
         width: 100%;
  }
  td.mytd {
        width:  500px;
  }
 </style>


<table class="mytable">
   <tr>
    <td class="mytd">Левая колонка</td>
    <td>Правая колонка</td>
    <td>Правая колонка</td>
    <td>Правая колонка</td>
    <td>Правая колонка</td>
    <td>Правая колонка</td>
    <td>Правая колонка</td>
    <td>Правая колонка</td>
    <td>Правая колонка</td>
    <td>Правая колонка</td>
   </tr>
  </table>

[Андрей Токмаков]

Алексей: Всё прекрасно работает, вы добавили класс mytd одному столбику, один столбик и стал шириной 500px

[Алексей]

Андрей Токмаков: при проверке да, на странице - нет! test.selftrips.ru/?p=288

[Андрей Токмаков]

Алексей: Вот про это я и говорил, попытка что то сделать с нулевыми знаниями.
Размер родительского блока 853px, как вы собираетесь в него вместить столбец шириной 500px и 9 столбцов с шириной ~50px ? Возьмите калькулятор и посчитайте