понедельник, 23 сентября 2019 г.

Excel в HTML!

Я знаю, что сам Excel - (страшная вещь) чудесная вещь! Конечно же, с помощью HTML нельзя делать безумно сложные расчёты, но красивую таблицу - можно!

Начнём с простого - как создать саму таблицу? Проще некуда! <table>...</table> делает всё за вас! Введя эти теги, вы создаёте строки для работы с вашей будущей таблицей. 

Но, создав таблицу, выделяется только поле - а как сделать рамочки будущему чуду? Нужно добавить свойство border, в котором отмечается ширина границ в пикселях, а свойство width ставит ширину таблицы (Я знаю, что на данном этапе слишком много информации, но пока сложно давать примеры работы. Мы даже не знаем, как сделать видимую строку в таблице!)

Строки таблицы создаются с помощью тегов <tr>...</tr>, их название - <th>...</th>, а само поле <td>...</td>. Попробуем объединить существующие знания!


Каков ваш уровень паники?Ваши ощущения?
5 из 5страх и ужас!
4 из 5не, не надо!
3 из 5лёгкая паника
2 из 5ну, посмотрим
1 из 5ой, несложно
0 из 5ой, запросто

<table 5px="" black="" border:=""> (можно вписать, как <table {border: 5px black;}>, он сам всё поменяет.)
<tbody>
<tr><th>Каков ваш уровень паники?</th><th>Ваши ощущения?</th></tr>
<tr><td>5 из 5</td><td>страх и ужас!</td></tr>
<tr><td>4 из 5</td><td>не, не надо!</td></tr>
<tr><td>3 из 5</td><td>лёгкая паника</td></tr>
<tr><td>2 из 5</td><td>ну, посмотрим</td></tr>
<tr><td>1 из 5</td><td>ой, несложно</td></tr>
<tr><td>0 из 5</td><td>ой, запросто</td></tr>
</tbody></table>

Теги <caption>...</caption> создают название вашей таблице, оно пишется сразу после тега <table>
Безумно полезным являются теги <colgroup>...<colgroup>, благодаря которому можно задать единое форматирование отдельных ячеек. С помощью тега <col> можно сформировать группы столбцов. А теперь добавим это в нашу таблицу!


Оценка уровня паники
Каков ваш уровень паники?Ваши ощущения?
5 из 5страх и ужас!
4 из 5не, не надо!
3 из 5лёгкая паника
2 из 5ну, посмотрим
1 из 5ой, несложно
0 из 5ой, запросто

<caption>Оценка уровня паники</caption>
<colgroup>
<col span="1" style="background: Yellow;"></col>
<col span="2" style="background: Orange;"></col>
</colgroup>

С помощью тегов <tfoot>...</tfoot> можно сделать завершающую строку всей таблицы,
атрибуты colspan и rowspan  объединяют указанное количество колонн и строк.

Теперь вы можете оформить самые красивые таблицы в своих блогах и сайтах! (мои не являются примером красоты)

0 коммент.:

Отправить комментарий