(HTML) Как воспроизвести эту вложенную таблицу?

-2

Это вопрос заданий. (HTML) Как воспроизвести эту вложенную таблицу?

Таблица выше - это то, что мне нужно сделать. В приведенной ниже таблице, что я придумал:

Мой код:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Question Two</title> 
     <meta charset="UTF-8"> 
    </head> 
    <body> 
     <h2>Nested Tables</h2> 
     <table border="1"> 
      <tr> 
       <th>Header column 1</th>  
       <th>Header column 2</th> 
       <th>Header column 3</th> 
       <th>Header column 4</th> 
      </tr> 
      <tr> 
       <td>Row 2 - Item 1</td> 
       <td>Row 2 - Item 2</td> 
       <td rowspan="2"> 
        <h4>Row 2: Nested Table 1</h4> 
        <table border="1">          
         <tr> 
          <th>Row 1 Header</th> 
          <td>item</td> 
         </tr> 
         <tr> 
          <th>Row 2 Header</th> 
          <td>item</td> 
         </tr> 
         <tr> 
          <th>Row 3 Header</th> 
          <td>item</td> 
         </tr> 
        </table> 
       </td> 
       <td>Row 2 - Item 4<br/>A second line</td> 
      </tr> 
      <tr> 
       <td> 
        <h4>Row 3: Nested Table 2</h4> 
        <table border=1> 
         <tr> 
          <th>Row 1 Header</th> 
          <td>item</td> 
         </tr> 
         <tr> 
          <th>Row 2 Header</th> 
          <td>item</td> 
         </tr> 
        </table> 
       </td> 
       <td>Row 3 - Item 2</td> 
       <td rowspan="2">Row 3 - Item 3</td> 
      </tr> 
      <tr> 
       <td>Row 4 - Item 1</td> 
       <td>Row 4 - Item 2</td> 
       <td>Row 4 - Item 3</td> 
      </tr> 
      <tr> 
       <td colspan="4">Row 5 - Last row of outer table</td> 
      </tr> 
     </table> 
    </body> 
</html>

Две вещи разные: шрифт и межстрочный интервал вложенной таблицы 1 и 2.

Как шрифт, существует ли способ установить шрифт по умолчанию для всех HTML-документов? Если да, то как?
Для интервала я понятия не имею. Я пробовал всевозможные комбинации <br>, <pre>, <div> и т. Д. Я уверен, что это не проблема браузера, которая вызвала ошибочный результат (попробовал несколько браузеров - я использую IE, работающий в Windows 7). Есть идеи?

спасибо.

источник

2016-01-27 John Doe

Вы можете изучить стиль оригинального HTML в своем браузере, чтобы увидеть такие вещи, как шрифты/интервал/etc., Не так ли? – David

Это скриншот .. –

Если у вас есть экранный снимок, то все, что вы можете сделать, это приблизительное. Если тот, кто дал вам снимок экрана, хочет, чтобы вы копировали исходный код именно тогда, они должны предоставить вам исходный код. – David

Это просто дикая догадка, но шрифт, который вы ищете, может быть «Calibri» или что-то очень похожее. Вы можете добавить font-family в качестве встроенного стиля в свой тег body, и все в таблице наследует шрифт.

<body style="font-family:Calibri;"> и here's a demo of it in action.

Интервал кажется прекрасным, как если бы вам нужно было внести коррективы, вы можете сделать это с помощью padding, margin или даже cellpadding.

Это будет подушечка пространство во всех клетках 10: <table border="1" cellpadding="10">

Это будет подушечка в верхней части ячейки по 10px: <td rowspan="2" style="padding-top:10px;">

источник

2016-01-27 17:58:11 wmeade

Согласно шрифта, есть способ установить шрифт по умолчанию для всех HTML-документов? Если да, то как?

Если это что-то для «всех HTML-документов», то это будет настройка браузера. Вы, вероятно, сами по себе. Но если вы хотите что-то для всего содержимого в , этот документ для использования, это легко с CSS. Что-то вроде этого:

<style> 
    body { 
     font-family: Arial; 
     font-size: 1em; 
     color: #000; 
    } 
</style>

Полагая, что в head в HTML бы применить этот стиль для всего содержимого body тега, в том числе всех потомков. (Вы также можете поместить код CSS в отдельный файл и использовать <link> тег для ссылки на него в head. Так как код растет по сложности, это быстро становится предпочтительным подходом.)

Для расстояния, я не имеют ни малейшего представления о.Я перепробовал все виды комбинаций <br>, <pre>, <div> .. и т.д.

Я бы использовать CSS для этого, как хорошо. Сначала укажите элемент (ы), на который вы хотите настроить таргетинг. id или class часто является хорошим подходом. Например:

<td rowspan="2" id="column3Cell">

Тогда в CSS вы можете ориентировать этот элемент и применить стили к нему:

#column3Cell { 
    padding-top: 10px; 
}

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

источник

2016-01-27 17:59:10 David

Спасибо, Дэвид. Все примеры учителя, похоже, имеют тот же шрифт. его, если его браузер использует этот шрифт по умолчанию. –

(HTML) Как воспроизвести эту вложенную таблицу?

ответ

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