Совет 1: Как вставить картинку в html таблицу

Язык html не совершенен и имеет ряд существенных недостатков. Для того чтобы привязать картинку к определенному месту страницы, лучше для этого вставить ее при помощи таблицы. В этом случае изображение будет считаться фоном и поверх его можно поместить текст.
Как вставить картинку в html таблицу
Инструкция
1
Первоначально необходимо создать таблицу, если ее еще нет. Это действие совершается в атрибуте <body>. Для этого используются теги (закрывающий тег обязателен):
• <table> - таблица;
• <tr> - строка;
• <td> - колонка.

Основные дополнительные атрибуты:
• Border – граница;
• Align – выравнивание по горизонтали;
• Valign – выравнивание по вертикали;
• Bordercolor – цвет рамки;
• Width – ширина;
• Height – высота.

Синтаксис таблицы 2X2 без рамки и левосторонним/правосторонним выравниванием содержимого:
<table border= "0">
<tr align="left">
   <td>Содержимое 1-й ячейки</td>
   <td> Содержимое 2-й ячейки </td> </tr>
<tr align="right">
   <td> Содержимое 3-й ячейки </td>
    <td> Содержимое 4-й ячейки </td> </tr>
</table>
2
Картинку нужно прописывать после тега <td>. Если вставить изображение в первую ячейку таблицы, представленной выше, то получится:
<table border= "0">
<tr align="left">
   <td><img src="адрес картинки в формате gif, png, jpeg"></td>
   <td> Содержимое 2-й ячейки </td> </tr>
<tr align="right">
   <td> Содержимое 3-й ячейки </td>
    <td> Содержимое 4-й ячейки </td> </tr>
</table>

Дополнительные атрибуты:
• Width – ширина;
• Height – высота;
• Alt - альтернативный текст, который будет отображаться у пользователя, если у него отключена функция просмотра картинок;
• Align – выравнивание по горизонтали;
• Valign – выравнивание по вертикали;
• Title – подпись к изображению.
3
Использовать изображение можно в качестве ссылки. Для этого его достаточно облачить в соответствующий тег: <a href="страница, на которую будет осуществляться переход"><img src="имя файла.png"></a>
В контексте таблицы это будет выглядеть так:
<table border= "0">
<tr align="left">
   <td><a href="stranitsa.html"><img src="kartinka.png"></a></td>
   <td> Содержимое 2-й ячейки </td> </tr>
<tr align="right">
   <td> Содержимое 3-й ячейки </td>
   <td> Содержимое 4-й ячейки </td> </tr>
</table>
4
Дополнительные возможности изображений.

1. Смена картинки на цвет при наведении на нее мышью и после смены местоположения курсора:
onMouseOver="this.style.background='#номер цвета'" onMouseOut="this.style.background='#номер цвета'"

2. Смена картинки на другое изображение при наведении мышью:
onmouseover="this.src='images/1.gif'" onmouseout="this.src='images/2.gif'"

3. Вставка вращающейся карусели из картинок в ячейку таблицы (значения можно менять):

<td align="left">
<BODY onload="Carousel()" background=>
<script type="text/javascript">
// 7 variables to control behavior
var Car_Image_Width=100;
var Car_Image_Height=100;
var Car_Border=true; // true or false
var Car_Border_Color="000000"; Border="0"
var Car_Speed=5;
var Car_Direction=true; // true or false
var Car_NoOfSides=6; // must be 4, 6, 8 or 12

/* array to specify images and optional links.
For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/
Car_Image_Sources=new Array(
"images/1.gif","",
"images/2.gif","",
"images/3.gif","",
"images/4.gif","",
"images/5.gif","",
"images/6.gif",""

// NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

function Carousel(){
if(document.getElementById){
for(i=0;i<Car_Image_Sources.length;i+=2){
C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div=document.getElementById("Carousel");
for(i=0;i<C_HalfNo;i++){
CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);
CW_I[i].style.position="absolute";
CW_I[i].style.top=0+"px";
CW_I[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I[i].style.borderStyle="solid";
CW_I[i].style.borderWidth=1+"px";
CW_I[i].style.borderColor=Car_Border_Color}
CW_I[i].src=Car_Image_Sources[2*i];
CW_I[i].lnk=Car_Image_Sources[2*i+1];
CW_I[i].onclick=C_LdLnk;
CW_I[i].onmouseover=C_Stp;
CW_I[i].onmouseout=C_Rstrt}
CarImages()}}

function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I[i].style.left=C_LeftOffset+"px";
CW_I[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
if(Car_Direction){
CW_I[C_HalfNo]=CW_I[0];
for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
CW_I[0]=CW_I[C_HalfNo];
CW_I[0].src=Car_Image_Sources[C_CrImg];
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages()",50)}

function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
function C_Rstrt(){C_Stppd=false}
</script><div id="Carousel" style="position:relative; width:130; height:21">

</td>
Обратите внимание
Это урок о том, как вставить картинку в HTML, как её оформить, как сделать обтекание картинки текстом и т.д. Ведь известно, что изображения делают сайт более привлекательным и отличным от других ресурсов, поэтому умение использовать тег «IMG» и его атрибуты весьма пригодится в современном Интернете. Но, главное тут — чувство меры! Переизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время её загрузки.
Полезный совет
Если эта область будет не соответствовать реальному размеру картинки, которую вы хотите вставить, то рисунок будет соответственно растянут или сужен, до заданного в html теге Img размера. Тем не менее, не следует использовать это способ, скажем, для уменьшения размера вставляемого в Html документ рисунка.  Лучше предварительно изменить размер картинки в графическом редакторе, а уже затем вставлять картинки в Html документ через любой удобный вам Html редактор кода.
Источники:
  • как вставить картинку без фона html

Совет 2 : Как скопировать таблицу

Очень часто при копировании информации с веб-сайтов в обычный текстовый файл возникает необходимость скопировать информацию, представленную в виде таблицы. К сожалению, обычный способ copy-paste в данном случае не работает. Однако можно пойти и другим путем.
Как скопировать таблицу
Инструкция
1
Скопировать таблицу в виде рисунка.
Для этого с помощью полос прокрутки расположите страницу так, чтобы таблица полностью была в пределах экрана. Нажмите на клавиатуре Print Screen, сохраняя в буфер обмена снимок экрана. Откройте любой графический редактор, к примеру, Paint, и вставьте в него полученное изображение. Далее, выделите область, содержащую таблицу, и сохраните ее как рисунок в формате jpg, который впоследствии вставьте в любой текстовый документ.
2
Использование специальных плагинов.
Существуют специальные плагины, которые могут распознавать таблицы на веб-страницах. Они позволяют переформатировать их в нужный формат и сохранить в текстовом редакторе. Для Firefox такой плагин называется Table2Clipboard. После его установки достаточно кликнуть на таблице правой кнопкой мыши и в контекстном меню выбрать Copy Whole Table. Эта функция копирует таблицу в буфер обмена, сохраняя при этом форматирование. Далее просто вставьте таблицу в документ.
3
Если требуется скопировать только часть таблицы, при нажатой кнопке Ctrl, левой кнопкой мыши выделите нужную область. После этого скопируйте ее с помощью команды Copy selected cells в контекстном меню и вставьте в документ.
4
Копирование таблиц с помощью Google Chrome.
В последних версиях браузера Google Chrome уже имеется функция, с помощью которой можно скопировать таблицу с сохранением форматирования. Для этого выделите таблицу и в контекстном меню выберите команду "Копировать".
5
Перенос таблиц с веб-станицы вручную.
Создайте в редакторе Word таблицу с нужным количеством строк и столбцов из меню "Вставка", "Таблица", "Создать таблицу". В открывшемся диалоговом окне укажите количество строк и столбцов и нажмите "ОК". После этого поочередно перенесите в нее содержимое каждой ячейки таблицы, расположенной на сайте.

Совет 3 : Как сохранить таблицы

Сохранение таблиц в офисном приложении Excel, входящего в пакет Microsoft Office, подчиняется общим правилам сохранения документов в операционной системе Microsoft Windows и не потребует от пользователя постижения скрытых тайн ресурсов компьютера.
Как сохранить таблицы
Вам понадобится
  • - Microsoft Excel
Инструкция
1
Запустите офисное приложение Excel, входящее в пакет Microsoft Office и выберите таблицу, подлежащую сохранению.
2
Укажите пункт «Сохранить как» в меню «Файл» верхней панели инструментов окна приложения.
3
Укажите путь к желаемому месту размещения сохраненной таблицы в выпадающем списке «Папка» и нажмите кнопку «Сохранить».
4
Вернитесь в меню «Файл» для выполнения процедуры открытия электронной таблицы формата OpenDocument и воспользуйтесь кнопкой «Открыть».
5
Укажите пункт «Таблица OpenDocument» в каталоге «Тип файла» и нажмите кнопку «Открыть» для подтверждения выполнения команды.
6
Выполните двойной клик мыши для осуществления альтернативного метода открытия выбранного файла и вернитесь в меню «Файл» верхней панели инструментов окна приложения Excel для выполнения операции сохранения нужной таблицы в формате OpenDocument.
7
Выберите команду «Сохранить как» и укажите пункт «Таблица OpenDocument» в каталоге «Тип файла».
8
Введите желаемое имя документа в соответствующее поле и нажмите кнопку «Сохранить» для применения выбранных изменений.
Видео по теме
Обратите внимание
Программы, использующие формат OpenDocument не всегда поддерживают формат Excel, и наоборот. Рекомендуется сохранение выбранной таблицы в формате создания, а после этого повторное сохранение нужного документа в формате, совместимом с программой, предназначенной для его открытия.
Полезный совет
Параметры отображения таблицы, созданной в формате Excel и сохраненной в формате OpenDocument (или созданной в формате OpenDocument и сохраненной в формате Excel) могут измениться. Поэтому перед отправкой выбранного файла другому пользователю рекомендуется закрыть документ в формате создания и открыть вновь в формате сохранения для определения степени критичности изменений форматирования.
Источники:
  • Как сохранить таблицу Excel
  • Открытие или сохранение листа в формате таблицы OpenDocument (ODS) с помощью Excel

Совет 4 : Как вставить в таблицу текст

Работа с таблицами может вызывать некоторые затруднения у начинающего пользователя: как создать таблицу, как вставить в нее текст? Так как для оформления чаще всего используются программы Microsoft Office Word и Excel, данные вопросы будут рассмотрены на их примере.
Как вставить в таблицу текст
Инструкция
1
В редакторе Microsoft Office Word создать таблицу можно с помощью предназначенных для этого инструментов. Запустите программу и откройте вкладку «Вставка». На панели инструментов найдите блок «Таблицы» и выберите инструмент «Нарисовать таблицу» или воспользуйтесь макетом, указав нужное количество строк и столбцов.
2
Чтобы заполнить текстом ячейку таблицы, установите в ней курсор и введите текст обычным способом. Если вам необходимо вставить фрагмент текста из другого документа, выделите его и нажмите сочетание клавиш Ctrl и С. Вернитесь в документ с таблицей, установите курсор в нужной ячейке и нажмите клавиши Shift и Insert или Ctrl и V.
3
Альтернативные способы: кликните в нужной ячейке правой кнопкой мыши и выберите в выпадающем меню команду «Вставить». Или же нажмите на вкладке «Главная» кнопку-миниатюру «Вставить» с изображением папки в блоке «Буфер обмена». Отрегулируйте высоту и ширину ячейки.
4
В приложении Microsoft Office Excel лист уже представляет собой таблицу, но можно также воспользоваться инструментами с вкладки «Вставка». Сам же текст в ячейку таблицы можно вставить по тому же принципу, что и в Word: либо используя горячие клавиши, либо с помощью мыши. Единственный момент, который нужно учитывать – это правильные параметры самой ячейки.
5
Откройте вкладку «Главная» и нажмите на кнопку-миниатюру «Формат» в блоке «Ячейки» на панели инструментов. Либо щелкните в ячейке с текстом правой кнопкой мыши и выберите в контекстном меню пункт «Формат ячеек». Откроется новое диалоговое окно.
6
Сделайте активной вкладку «Число» и выделите в группе «Числовые форматы» пункт «Текстовый», используя левую кнопку мыши. Перейдите на вкладку «Выравнивание» и в группе «Отображение» установите маркер в полях «Переносить по словам» и «Автоподбор ширины». Нажмите на кнопку ОК, чтобы новые настройки вступили в силу.

Совет 5 : Как вставить таблицу в сайт

Языки разметки HTML, Wiki и BB-Code оснащены средствами для создания таблиц. Это позволяет помещать в состав документов или сообщений форума информацию о сравнительных характеристиках тех или иных объектов, статистические и иные данные.
Как вставить таблицу в сайт
Инструкция
1
Для создания таблицы в документе на языка HTML вначале откройте ее тегом <table>. После этого откройте ее первую строку тегом <tr> (TR - это сокращение от table row, то есть, строка таблицы). Теперь можно вставить в строку желаемое число ячеек. Каждую из них оформляйте, открыв тег <td>, введя после него данные, а затем поместив закрывающий тег </td>. Здесь сокращение TD означает table data, то есть, данные таблицы. Разместив таким образом необходимое число ячеек, закройте строку тегом </tr>. Когда же будут введены все строки, закройте саму таблицу, используя тег </table>, например:

<table>
<tr><td>Помещение</td><td>Количество розеток</td></tr>
<tr><td>Прихожая</td><td>1</td></tr>
<tr><td>Санузел</td><td>0</td></tr>
<tr><td>Кухня</td><td>2</td></tr>
<tr><td>Комната</td><td>3</td></tr>
<tr><td>Балкон</td><td>0</td></tr>
</table>
2
Добавляя к тегу <table> параметры, можно менять цвет и толщину ее линий. Так, чтобы внешний периметр таблицы получился толщиной в один пиксель, а внутренние линии - в два пикселя, и все это было окрашено в темно-синий цвет, используйте такую конструкцию:

<table border=1 cellspacing=2 borbercolor=0000a0>
3
Чтобы объединить нескольких ячеек по горизонтали, используйте совместно с тегом <td> параметр colspan. Так, если написать <td colspan=2>, то получится ячейка шириной в два столбца.
4
При составлении сообщения в форуме, где используется язык разметки BB-Code, для создания таблиц используйте те же теги, но вместо угловых скобок используйте квадратные. Выглядеть это может так:

[table]
[tr][td]Помещение[/td][td]Количество розеток[/td][/tr]
[tr][td]Прихожая[/td][td]1[/td][/tr]
[tr][td]Санузел[/td][td]0[/td][/tr]
[tr][td]Кухня[/td][td]2[/td][/tr]
[tr][td]Комната[/td][td]3[/td][/tr]
[tr][td]Балкон[/td][td]0[/td][/tr]
[/table]

Этот прием работает не во всех форумах, да и в тех, где имеется соответствующая функция, поддерживаются не все теги.
5
На языке разметки Wiki таблицы оформляйте как показано ниже:

{| border="1"
|Помещение
|Количество розеток
|-
|Прихожая
|1
|-
|Санузел
|0
|-
|Кухня
|2
|-
|Комната
|3
|-
|Балкон
|0
|}

Знак | используется здесь для перехода в следующую ячейку, а конструкция |- предназначена для перевода строки.
Совет полезен?
Поиск
Добавить комментарий к статье
Осталось символов: 500