Готовые коды для тренировки.
Я решил написать коды отдельно, для того, чтобы было удобнее сразу скопировать их, вставить и потренироваться уже на готовом коде изменяя его значения.
Если вы что-то забыли или не поняли, то есть смысл вернуться к "Структуре HTML документа"
Важное предупреждение!!!
Не забывайте после копирования с сайта удалять ссылку, которая иногда прикрепляется автоматически!!!
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Таблица посложнее</title> </head> <body> <table> <caption>Посещения по городам</caption> <tr> <th>Город</th> <th>Посещения</th> <th>Страниц</th> <th>Время</th> </tr> <tr> <td>СПб</td> <td>199</td> <td>18,02</td> <td>00:13:45</td> </tr> <tr> <td>Москва</td> <td>69</td> <td rowspan="2">нет данных</td> <td>00:00:44</td> </tr> <tr> <td>Киев</td> <td>5</td> <td>00:18:07</td> <tr> <td colspan="3">Всего посещений</td> <td>273</td> </tr> </table> </body> </html>
CSS
body { margin: 0; padding: 0 10px; font-size: 14px; font-family: Arial, sans-serif; } table { border-collapse: collapse; border: px solid black; } td { padding: 10px; padding-right: 10px; border: 1px solid lightgray; } th { padding: 10px; border-bottom:2px solid black } caption { caption-side:bottom; text-align: center; }
Еще один пример дл тренировки:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Испытание: итоговая таблица</title> </head> <body> <h1>Итоговая таблица</h1> <table> <tr> <th class="cell-11" style="width: 33%">Город</th> <th class="cell-22" style="width: 33%">Посещений</th> <th class="cell-33" style="width: 33%">%</th> </tr> <tr> <td class= "cell-1">СПб</td> <td class="cell-2">199</td> <td class="cell-3">65.12</td> </tr> <tr class="cell-4"> <td class= "cell-1">Москва</td> <td class="cell-2">69</td> <td class="cell-3">21.3</td> </tr> <tr> <td class= "cell-1">Киев</td> <td class="cell-2">5</td> <td class="cell-3">8</td> </tr> <tr class= "cell-4"> <td class= "cell-1" colspan= "2">Посещений за весь период</td> <td class="cell-3">273</td> </tr> </table> </body> </html>
CSS
body { width: 350px; margin: 0; padding: 0 10px; font-size: 14px; font-family: Arial, sans-serif; } td { padding: 10px; padding-right: 10px; border-bottom: 1px solid lightgray; text-align:left; } table { border-collapse: collapse; border: px solid black; } th { padding: 10px; border-top:1px solid black; border-bottom: 1px solid black; color:blue; } .cell-1{ text-align:left; } .cell-2{ text-align:center; } .cell-3 { text-align:right; } .cell-11 { text-align:left; background-color: darkcyan; color:white; } .cell-22 { text-align: center; background-color:lightblue; color: white; } .cell-33 { text-align:right; background-color: darkcyan; color: white; } .cell-4{ background-color: lightyellow; }
Может кому интересно, но я использовал школу программирования Пиксель. И цены недорогие, и преподователи хорошие. Поэтому вот моё субъективное мнение - рекомендую)
ОтветитьУдалить