HTML: Как создать представление календаря?

Я HTML/начинающий CSS пытается создать календарь, очень похожие на дизайн Microsoft Outlook, как показано ниже:HTML: Как создать представление календаря?

До сих пор я получил основную схему календаря со следующим HTML/CSS:

<html> 
<head> 
    <title>August, 2016</title> 
</head> 
<body> 
    <center><h1>August, 2016</h1></center> 
    <style> 
     table{ 
      table-layout: fixed; 
     } 
    </style> 
    <table border="1" width="1250" height="800"> 
     <tr> 
      <th>Sun</th> 
      <th>Mon</th> 
      <th>Tue</th> 
      <th>Wed</th> 
      <th>Thur</th> 
      <th>Fri</th> 
      <th>Sat</th> 
     </tr> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td> 
       <table> 
        <tr> 
         <td>1</td> 
         <td></td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
           <a href="">Claim Benefits</a><br> 
           <a href="">Pick up groceries</a><br> 
           <a href="">Iron the shirts</a><br> 
           <a href="">+5 more...</a> 
         </td> 
        </tr> 
       </table> 
      </td> 
      <td>2</td> 
     </tr> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
     </tr> 
     </tr> 
      <td>3</td> 
      <td>4</td> 
      <td> 
       <table> 
        <tr> 
         <td>5</td> 
         <td></td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
           <a href="">Claim Benefits</a><br> 
           <a href="">Pick up groceries</a><br> 
           <a href="">Iron the shirts</a><br> 
           <a href="">+5 more...</a> 
         </td> 
        </tr> 
       </table> 

      </td> 
      <td>6</td> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
     </tr> 
     </tr> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
     </tr> 
     </tr> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
     </tr> 
     </tr> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
     </tr> 
    </table> 
</body> 
</html>

Который производит:

Я хочу, чтобы выполнить некоторые из тех же вещей, прогноз делает:

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

Благодарим за полезный код или предложения.

источник

2016-08-14 Jenna Maiz

Простой способ позиционирования/стиля номеров календаря отдельно от содержимого состоит в том, чтобы сделать их td псевдоэлементами. Вы можете установить для контента что-то вроде attr(data-day), чтобы он динамически отображал число, установленное в HTML.
Чтобы убедиться, что ячейки имеют одинаковую высоту, просто укажите высоту в CSS. Поскольку вам нужно только «до 4 гиперссылок», вы можете просто проверить, какая высота для ячейки с 4 ссылками, а затем использовать ее.

Кстати, похоже, есть много ошибок с tr тегов в коде, и я рекомендовал бы представляя перечисленные элементы внутри отдельного дня в виде списка, а не в виде вложенных таблиц (календарь - это табличные данные, но содержимое дня является списком дел).

Вот фрагмент, который включает в себя рекомендуемые изменения:

table { 
 
    table-layout: fixed; 
 
    width: 1250px; 
 
    height: 800px; 
 
} 
 

 
table td { 
 
    height: 100px; 
 
    position: relative; 
 
} 
 

 
table td:before { 
 
    content: attr(data-day); 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: yellow; 
 
}

<center> 
 
    <h1>August, 2016</h1> 
 
</center> 
 
<table border="1"> 
 
    <tr> 
 
    <th>Sun</th> 
 
    <th>Mon</th> 
 
    <th>Tue</th> 
 
    <th>Wed</th> 
 
    <th>Thur</th> 
 
    <th>Fri</th> 
 
    <th>Sat</th> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td data-day="1"> 
 
     <ul> 
 
     <li><a href="">Claim Benefits</a></li> 
 
     <li><a href="">Pick up groceries</a></li> 
 
     <li><a href="">Iron the shirts</a></li> 
 
     <li><a href="">+5 more...</a></li> 
 
     </ul> 
 
    </td> 
 
    <td data-day="2"></td> 
 
    </tr> 
 
    <tr> 
 
    <td data-day="3"></td> 
 
    <td data-day="4"></td> 
 
    <td data-day="5"></td> 
 
    <td data-day="6"></td> 
 
    <td data-day="7"></td> 
 
    <td data-day="8"></td> 
 
    <td data-day="9"></td> 
 
    </tr> 
 
    <tr> 
 
    <td data-day="10"></td> 
 
    <td data-day="11"></td> 
 
    <td data-day="12"> 
 
     <ul> 
 
     <li><a href="">Claim Benefits</a></li> 
 
     <li><a href="">Pick up groceries</a></li> 
 
     <li><a href="">Iron the shirts</a></li> 
 
     <li><a href="">+5 more...</a></li> 
 
     </ul> 
 
    </td> 
 
    <td data-day="13"></td> 
 
    <td data-day="14"></td> 
 
    <td data-day="15"></td> 
 
    <td data-day="16"></td> 
 
    </tr> 
 
    <tr> 
 
    <td data-day="17"></td> 
 
    <td data-day="18"></td> 
 
    <td data-day="19"></td> 
 
    <td data-day="20"></td> 
 
    <td data-day="21"></td> 
 
    <td data-day="22"></td> 
 
    <td data-day="23"></td> 
 
    </tr> 
 
    <tr> 
 
    <td data-day="24"></td> 
 
    <td data-day="25"></td> 
 
    <td data-day="26"></td> 
 
    <td data-day="27"></td> 
 
    <td data-day="28"></td> 
 
    <td data-day="29"></td> 
 
    <td data-day="30"></td> 
 
    </tr> 
 
    <tr> 
 
    <td data-day="31"></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>

источник

2016-08-14 18:32:02

Я думаю, что Вы можете добавить flot:left; стиль к этому номеру месяца, а может быть, margin,padding:0;
Я предлагаю использовать min-height с тем же значением, как высота всех ячеек

источник

2016-08-14 18:10:21

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

h1 {text-align:center;}

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

table, th, td {border-collapse: collapse;}

Чтобы стилизовать данные таблицы удалить отступы и поля , Это должно перенести первый td в первом tr в верхний левый угол.

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

tr.week {height:200px;}

источник

2016-08-14 19:08:09

HTML: Как создать представление календаря?

ответ

Смежные вопросы