Таблица

HTML Table Background

This page contains HTML table background code. This code enables you to modify the background of your HTML tables. For example, you can change the background color or add a background image to your tables.

Setting All Background Styles

There is a shorthand CSS property that allows you to set all your background styles in one go. This property is the background property.

This is the property that most web developers use for setting their table backgrounds, as it’s quicker to use and it helps to minimize code. This property allows you to set the background color and a background image properties using one property. You can see it in action with the following example.

If you have difficulty understanding this property, have a look at the other examples on this page. They should make things a bit clearer for you.

Background Color

The following example demonstrates how background color can be applied to the table using the background-color property. Check out HTML Table Background Color to see more examples of adding background color to a table.

Table Background Image

Here’s an example of adding a background image to your table by using the CSS background-image property.

The background image in this example automatically repeats across the full width and height of the table. In other words, if the background image is smaller than the table, it will be displayed again and again until it reaches the edge of the table.

Here’s the actual image that we will use in the following example:

As you can see, this image is smaller than the width of the table, so it repeated across the full width and height of the table.

In this example, we also add a thin border to our table. Here’s more about HTML table borders.

Non-Repeating Background Image

Sometimes you might not want the background image to repeat. Sometimes you might want it to appear once only. For this effect, you can use the CSS background-repeat property. You can also use the background-position property to define where the image is positioned within the table. For example, you could position the image in the center of the table, or at the top-left or bottom-right etc.

Background Image on Table Cells

You could also add a background image to each individual table cell. You could use a different image for each cell or the same image. If you use the same image, it would give it that «repeat» effect and the «repeat» could be precisely aligned with each table cell (but it doesn’t have to be). You could also achieve this effect using a repeating background image on the whole table, but you’d need to ensure that each cell is exactly the same size as the image, and you might need to play around with the table border.

Here’s an example of adding a background image to each cell using a CSS class with an embedded style sheet:

Related

Источник

Создание таблиц в HTML — фон таблицы — рамка таблицы — объединение ячеек

При создании веб страниц очень часто необходимо представить некоторое содержимое страницы в виде таблиц.

Иногда таблицы используют для создания структуры страницы. Этот подход не совсем верный, потому что таблицы изначально не предназначались для позиционирования элементов страницы.

Для этой цели лучше всего пользоваться средствами CSS. Но в некоторых случаях таблицы являются незаменимыми и удобными для предоставления информации.

За создание таблиц в HTML отвечает тег

и закрывающий тег

. Но вам наверняка уже известно, что таблицы состоят из строчек и ячеек. Поэтому для того, чтобы создать таблицу, нам необходимы еще два тега: это тег который отвечает за создание строк, и тег, отвечающий за создание ячеек.

Для того, чтобы посмотреть как все работает на практике, создадим таблицу, состоящую из двух строк и четырех ячеек. Код нашей таблицы будет следующий:

 
 
1 - ячейка
 
2 - ячейка
 
 
3 - ячейка
 
4 - ячейка
 
 

Для того чтобы, увидеть что из этого получится, создайте html страницу используя код расположенный ниже. Если не знаете как создать HTML страницу, смотрите урок основы HTML.

   
 
1 - ячейка
 
2 - ячейка
 
 
3 - ячейка
 
4 - ячейка
 
 
  

У вас должно получиться следующее:

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

border — задает ширину рамки таблицы в пикселях, записывается так: .

bordercolor – цвет рамки таблицы, данный атрибут поддерживает не все браузеры, поэтому вы можете и не увидеть заданный цвет рамки:

Мы задали ширину рамки 2 пикселя, синего цвета, таблица примет следующий вид:

width – задает ширину таблицы в пикселях или процентах:

height – высота таблицы в пикселях или процентах:

Ширина таблицы будет 250 пикселей, а высота 150 пикселей, таблица будет выглядеть так:

align – выравнивание таблицы;

align=left – таблицы будет выровнена по левому краю;

align=right – таблица будет выровнена по правому краю:

Наша таблица должна выровняться по правому краю.

bgcolor – цвет фона таблицы, bgcolor=#FFC000 – цвет фона таблицы будет желтый:

Таблица получит следующий вид:

background – при помощи данного атрибута можно задать изображение, которое будет фоном таблицы.

Таблица примет следующий вид:

cellspacing – задает отступ между ячейками таблицы.

В результате наши ячейки прижались друг к другу, а текст внутри ячеек получил отступ:

hspace — задает промежуток от таблицы в лево и в право в пикселях, записывается так: hspace=20

nowrap – запрещает перенос слов в ячейке, записывается просто nowrap

Последние два атрибута применяются крайне редко, поэтому пример кода с ними я не показываю.

width — ширина ячейки в пикселях или в процентах.

height – высота ячейки в пикселях или процентах.

Например, зададим ширину первой ячейки первой строки в 30% — width=30% , а высоту первой ячейки второй строки в 100px. Код будет таким:

 
 
1 - ячейка
 
2 - ячейка
 
 
3 - ячейка
 
4 - ячейка
 
 

Наша таблица примет следующий вид:

Заметьте, достаточно задать одной ячейке высоту или ширину и все ячейки этой строки или столбца примут такой же размер. Поэтому если необходимо задать, например определенную высоту ячеек то достаточно указать этот параметр для одной ячейки и все остальные ячейки строки станут такими же.

align – выравнивает содержимое ячеек, имеет следующие значения:

align=»lef» – содержимое ячейки будет выровнено по левому краю;

align=»right» – содержимое будет выровнено по правому краю;

align=»center» – содержимое будет выровнено по центру ячейки.

Добавим эти атрибуты и значения в наш код и выровняем содержимое 1 — й ячейки по левому краю (по левому краю содержимое выравнивается по умолчанию, однако в некоторых случаях данный атрибут необходим), содержимое 2 – й ячейки выровняем по правому краю, а 4 -й по центру.

 
 
1 - ячейка
 
2 - ячейка
 
 
3 - ячейка
 
4 - ячейка
 
 

bgcolor – при помощи данного атрибута можно задать цвет ячейки.

background – устанавливает изображение в виде фона ячейки.

Для этого в наш код добавим необходимые атрибуты, для наших ячеек bgcolor=»#FFFF00″ для 2-й ячейки и background= «fon.jpg» для 4-й ячейки. В результате наша таблица станет выглядеть так:

Как вы видите, несмотря на то что мы задавали фон самой таблицы, если задать фон ячеек таблицы, то отображаться будет именно тот фон который мы задали для ячеек.

bordercolor – задает цвет рамки ячейки.

Существует еще один атрибут, предназначенный для выравнивания содержимого ячеек:

valign – он производит выравнивание содержимое ячеек по вертикали.

valign=»top» – выравнивание содержимого ячейки по верхнему краю;

valign=»bottom» – выравнивание содержимого ячейки по нижнему краю;

valign=»middle» – выравнивание посередине ячейки;

valign=»baseline» – выравнивание содержимого ячейки по базовой линии.

Добавим эти атрибуты к каждой из наших 4-х ячеек.

 
 
1 - ячейка
 
2 - ячейка
 
 
3 - ячейка
 
4 - ячейка
 
 
 

Наша таблица примет следующий вид:

Последнее что нам необходимо рассмотреть в этом уроке, это объединение ячеек таблицы. Для того чтобы объединить несколько ячеек в строке, существует атрибут colspan=»» где в кавычках указывается количество ячеек которое необходимо объединить.

Чтобы объединить ячейки по вертикали т. е. в столбце, необходимо использовать атрибут rowspan=»» где в кавычках указывается количество ячеек, которое необходимо объединить.

Для того чтобы увидеть как это работает, создайте новую таблицу содержащую три строки по три ячейки в каждой. Код этой таблицы будет следующий:

 
 
1 - ячейка
 
2 - ячейка
 
3 - ячейка
 
 
4 - ячейка
 
5 - ячейка
 
6 - ячейка
 
 
7 - ячейка
 
8 - ячейка
 
9 - ячейка
 
 

Теперь объединим 1-ю и 2-ю ячейку в строке и 3-ю, 6-ю и 7-ю ячейку в ряду. Код нашей таблицы будет следующий:

 
 
1 и 2 – ячейки объединенные
 
3-6-9 – ячейки объединенные
 
 
4 - ячейка
 
5 - ячейка
 
 
7 - ячейка
 
8 - ячейка
 
 

Обратите внимание, что теги той ячейки, которая объединяется, не записываются. Наша таблица будет иметь следующий вид:

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

Материал подготовлен проектом: webmastermix.ru

Источник

HTML table background image

We can create attractive headers like modern web design sites using background images. We will use one simple image to create one header like this below. To create one image like this please visit our gradient tutorial in our graphics section.

This is our text over the header

background='images/bg1.jpg'> 
This is our text over the header 

Adding Background image to table data cell

  
background='images/bg1.jpg'>This is our text over the header 

In above script we have added background image directly. We can also use style sheet to display images inside table

Using Style

All tables of the page will follow this property and all will use the same image as background image.
By adding class to it we can define another style to some other tables.

We will add the above code to head section of the page and display two tables with this.
demo of Table background image with CSS →
Here is the script of the above demo

       
Cell 1
 
Cell 2
 
Cell 3
 
Cell 4
 
 
Cell 1
 
Cell 2
 
Cell 4
 
Cell 4
 
 
 
 
 
Cell 2
 
Cell 3
 
Cell 4
 
 
Cell 1
 
Cell 2
 
Cell 4
 
Cell 4
 
 
  

plus2net.com

Источник