Выравнивание элементов в таблицах

@bigrub · Регистрация: 08.06.2015

Студворк — интернет-сервис помощи студентам

Нужно сверстать страницу электронного письма, только статические элементы(то есть шапку письма и контактные данные(то что внизу письма)). Вопрос как сделать так, чтоб в шапке письма изображение(логотип) было прижато к левому краю, а контактный телефон был прижат к правому краю.

@Fedor92 · 20.09.2015, 12:06

Сообщение от bigrub

к левому краю, а контактный телефон был прижат к правому краю

Если таблицей верстать то можно применить выравнивание внутри ячейки - text-align:left для лого и text-align:right для номера телефона, а если блоками тогда float:left для блока лого и float:right для блока номера телефона...

@bigrub · 20.09.2015, 12:28 **[ТС]**

Сообщение от Fedor92

Если таблицей верстать то можно применить выравнивание внутри ячейки - text-align:left для лого и text-align:right для номера телефона, а если блоками тогда float:left для блока лого и float:right для блока номера телефона...

text-align:left и text-align:right пробовал, они не срабатывают, а вот float:left для блока лого и float:right для блока номера телефона не пробовал

Добавлено через 16 минут

Сообщение от Fedor92

а если блоками тогда float:left для блока лого и float:right для блока номера телефона...

Можно пример привести?

@Fedor92 · 20.09.2015, 12:58

Сообщение от bigrub

Можно пример привести?

Примерно так:

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут pattern</title>
  <style>
html,body{width:100%; height:100%; margin:0} 
*{box-sizing:border-box}
.wrapper{width:40%; height:500px; margin:0 auto}
.left{float:left; width:20%; height:100px; background:red}
.right{float:right; width:20%; height:100px; background:red}
form{float:left; width:100%; height:400px; background: blue}
table,tr,td{border:1px solid; border-collapse:collapse}
table{width:40%; margin:0 auto}
table tr td:nth-child(1){text-align:left}
table tr td:nth-child(2){text-align:right}
h1{text-align:center}
 </style>
 </head>
  <body>
  <h1>Вариант с float</h1>
   <div class="wrapper">
    <div class="left">Logo</div>
    <div class="right">8-961-234-02-15</div>
    <form>Форма</form>
</div>
<h1>Вариант с text-align</h1>
<table>
    <tr>
        <td>Logo</td>
        <td>8-961-234-02-15</td>
    <tr>
</table>
  </body>
</html>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@bigrub 0 / 0 / 0 Регистрация: 08.06.2015 Сообщений: 18

	Выравнивание элементов в таблицах 20.09.2015, 10:50. Показов 1143. Ответов 3 Метки нет (Все метки) Нужно сверстать страницу электронного письма, только статические элементы(то есть шапку письма и контактные данные(то что внизу письма)). Вопрос как сделать так, чтоб в шапке письма изображение(логотип) было прижато к левому краю, а контактный телефон был прижат к правому краю. 0

Выравнивание элементов в таблицах

Решение