Практикуя HTML-таблицы


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table>
        <th ><h3>Food you love to eat</h3></th>
        <tr> 
                <td>I love eating food . All types of food are good for health. I like fruits in them. Fruits are good for health.</td>
                <td width="170"> <img src ="http://www.htmliseasy.com/exercises/fruitbowl.gif" /> </td>
        </tr>
</table>
</body>
</html>


569
12
задан 29 июня 2011 в 08:06 Источник Поделиться
Комментарии
4 ответа

HTML-код, который вы представили, является недействительным. Я изменил следующие вещи, так что ваш HTML будет действительным:


  1. Не ставьте

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


  2. В таблице тег-это первый тег, который должен появиться.

  3. В теге, атрибуте альт не требуется. В АЛТ атрибут задает альтернативный текст для изображения, если изображение не может быть отображено.

Ваш HTML-валидацию:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<h3>Food you love to eat</h3>
<table>
<tr>
<td>I love eating food . All types of food are good for health. I like fruits in them. Fruits are good for health.</td>
<td width="170"> <img src ="http://www.htmliseasy.com/exercises/fruitbowl.gif" alt="Fruit Bowl" /> </td>
</tr>
</table>
</body>
</html>

13
ответ дан 29 июня 2011 в 08:06 Источник Поделиться

То, что не было упомянуто использование заголовка таблицы теги

Если вы хотите, чтобы заголовки таблицы должна выглядеть примерно так

<tr>
<th colspan="2">Food you love to eat</th>
</tr>
<tr>
<td>
I love eating food . All types of food are good for health. I like fruits in them. Fruits are good for health.
</td>
<td width="170">
<img src ="http://www.htmliseasy.com/exercises/fruitbowl.gif" alt="Fruit Bowl" />
</td>
</tr>

Заголовки таблицы должны быть подряд.

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


Просто потому, что сниппеты-это круто



table {
border: 3px solid red;
}
th {
border: 3px double green;
}
td {
border: 3px dashed blue;

<table width="500px">
<tr>
<th colspan="2">Food you love to eat</th>
</tr>
<tr>
<td>
I love eating food . All types of food are good for health. I like fruits in them. Fruits are good for health.
</td>
<td width="170">
<img src ="http://www.htmliseasy.com/exercises/fruitbowl.gif" alt="Fruit Bowl" />
</td>
</tr>
</table


Если вы перечисляете несколько элементов, которые вы "люблю поесть", то это было бы очень хорошо использовать табличную структуру.

10
ответ дан 13 февраля 2014 в 02:02 Источник Поделиться

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

Я настоятельно рекомендую идти на YouTube и найти некоторые стартера видео, содержащие в HTML5. Таблица учебники не уедешь, но 1996. Сохранить хорошую работу.

5
ответ дан 7 сентября 2012 в 08:09 Источник Поделиться

Вы можете изменить свой элемент DOCTYPE в HTML5:

<!DOCTYPE html>

Вы могли бы также использовать валидатор — http://validator.w3.org/ , которые станут изюминкой любого синтаксиса таких проблем, как отсутствующим атрибутом Alt, отсутствует тр элемент по элемент TD и т. д.

И поскольку вы эволюционировали так, вы найдете этот ресурс полезным: http://developers.whatwg.org/

3
ответ дан 13 февраля 2014 в 11:02 Источник Поделиться