Рамка

 
 
 
 
 
 
 
№
 
Фамилия
 
Номер телефона
 
1
 
Фрося Бурлакова
 
8-952-987-13-20
 
2
 
Иван Петров
 
8-918-964-70-11
 
3
 
Афоня Ивлев
 
8-961-594-12-45
 

В браузере вы увидите такую таблицу:

Как задать высоту таблицы (строки)

HTML дает возможность задать как высоту всей таблицы, так и отдельных строк.

Для задания высоты таблицы атрибут HEIGHT нужно указать в тэге TABLE, а чтобы изменить высоту отдельной строки – указать этот атрибут в тэге TR.

Для примера увеличим высоту первой строки

 
 
 
 
 
 
 
№
 
Фамилия
 
Номер телефона
 
1
 
Фрося Бурлакова
 
8-952-987-13-20
 
2
 
Иван Петров
 
8-918-964-70-11
 
3
 
Афоня Ивлев
 
8-961-594-12-45
 

Как изменить ширину столбца

Теперь увеличим ширину первого столбца. Так как в HTML нет понятия столбец, то нам придется указать ширину первой ячейки верхней строки.

 
 
 
 
 
 
 
№
 
Фамилия
 
Номер телефона
 
1
 
Фрося Бурлакова
 
8-952-987-13-20
 
2
 
Иван Петров
 
8-918-964-70-11
 
3
 
Афоня Ивлев
 
8-961-594-12-45
 

Выравнивание содержимого таблицы (по горизонтали и вертикали)

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

И если с выравниванием по вертикали все понятно (у тэгов TABLE, TR и TD есть атрибут ALIGN). То как выровнять по горизонтали не совсем понятно.

Для выравнивания содержимого таблицы, строки или ячейки по горизонтали существует атрибут VALIGN. И этот атрибут имеет свои параметры TOP (выравнивание по верхнему краю), MIDDLE (по середине), BOTTOM (по нижнему краю).

Для нашей шапки установим выравнивание по центру, по середине.

Также выровняем содержание ячеек с нумерацией и телефонами по центру.

 
 
 
 
 
 
 
№
 
Фамилия
 
Номер телефона
 
1
 
Фрося Бурлакова
 
8-952-987-13-20
 
2
 
Иван Петров
 
8-918-964-70-11
 
3
 
Афоня Ивлев
 
8-961-594-12-45
 

В браузере увидим:

Источник

Как назначить цвет рамки каждой ячейки таблицы?

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

моя ошибка была в том, что я писала border: 2 px solid red; и на «текстовый» цвет оно не реагировало спасибо!

2 ответа 2

table < width:100%; max-width: 500px; margin: 0 auto; table-layout: fixed; background: #FEF834; border: 2px solid #17152B; >table td < border: 2px solid #BCB946; padding: 15px; >table tr:nth-child(1) td:nth-child(1) < border-color: #ED4630; background: #fff; >table tr:nth-child(1) td:nth-child(2) < border-color: #222200; >table tr:nth-child(1) td:nth-child(3) < border-color: #2242E3; background: #6CF8FC; >table tr:nth-child(2) td:nth-child(1) < border-color: #FFFEF1; background: #E964FE; >table tr:nth-child(2) td:nth-child(2) < border-color: #B23322; background: #EC52A1; >table tr:nth-child(2) td:nth-child(3)

Вы можете применить отдельные стили для каждого элемента вашей таблицы. Например так:

       
 
Firstname
 
Lastname
 
Age
 
 
Eve
 
Jackson
 
94
 
 
  

Документация W3 + цвета ХТМЛ. Эта техника рекомендуется валидатором скорости Гугл. Так сканер быстрее загружает видимую часть страницы.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.7.27.43548

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

How do I change HTML table cell color on click

I’m trying to change the background color of an HTML table cell when the user clicks on the cell. Any ideas on how to do this? I have access to the JS Prototype library, so any suggestions for Prototype or straight Javascript would be welcome.

3 Answers 3

Ugly, but demonstrates the effect:

I’m not well versed in the Prototype framework, but here’s some raw Javascript that’ll do what you’re looking for:

var table = document.getElementsByTagName('table')[0]; if(table) table.onclick = function(e) < var target = (e || window.event).target; if (target.tagName in ) target.setAttribute('style', 'background-color: #F00'); >;​ 

Test it on jsFiddle

You could loop over all the children of the table and add an click event to them

with prototype the code is:

$('your_table').observe('click', function(event) < var clickedCell = event.findElement('td'); if (clickedCell) < clickedCell.setStyle(< background: '#dfd' >); > >); 

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник