Добавление изображения внутри ячейки таблицы в HTML
Извините, но я не могу сделать эту простую вещь. Я не могу добавить изображение в ячейку таблицы.
Ниже мой код, который я написал: -
<html>
<head>CAR APPLICATION</head>
<body>
<table border = 5 bordercolor = red align = center>
<th colspan = 14>ABCD</th>
<tr>
<th colspan = 4>Name</th>
<th colspan = 4>Origin</th>
<th colspan = 4>Photo</th>
</tr>
<tr>
<td colspan = 4>Bugatti Veyron Super Sport</th>
<td colspan = 4>Molsheim, Alsace, France</th>
<td colspan = 4><img src="C:\Pics\H.gif" alt="" border=3 height=100 width=100></img></td>
</tr>
<tr>
<td colspan = 4>SSC Ultimate Aero TT TopSpeed</td>
<td colspan = 4>United States</td>
<td colspan = 4 border=3 height=100 width=100>Photo1</td>
</tr>
<tr>
<td colspan = 4>Koenigsegg CCX</td>
<td colspan = 4>Ängelholm, Sweden</td>
<td colspan = 4 border=4 height=100 width=300>Photo1</td>
</tr>
<tr>
<td colspan = 4>Saleen S7</td>
<td colspan = 4>Irvine, California, United States</td>
<td colspan = 4 border=3 height=100 width=100>Photo1</td>
</tr>
<tr>
<td colspan = 4> McLaren F1</td>
<td colspan = 4>Surrey, England</td>
<td colspan = 4 border=3 height=100 width=100>Photo1</td>
</tr>
<tr>
<td colspan = 4>Ferrari Enzo</td>
<td colspan = 4>Maranello, Italy</td>
<td colspan = 4 border=3 height=100 width=100>Photo1</td>
</tr>
<tr>
<td colspan = 4> Pagani Zonda F Clubsport</td>
<td colspan = 4>Modena, Italy</td>
<td colspan = 4 border=3 height=100 width=100>Photo1</td>
</tr>
</table>
</body>
<html>
Что я делаю неправильно? Это мой экран вывода: -
![enter image description here]()
Ответы
Ответ 1
Это сработало для меня: -
<!DOCTYPE html>
<html>
<head>
<title>CAR APPLICATION</title>
</head>
<body>
<center>
<h1>CAR APPLICATION</h1>
</center>
<table border="5" bordercolor="red" align="center">
<tr>
<th colspan="3">ABCD</th>
</tr>
<tr>
<th>Name</th>
<th>Origin</th>
<th>Photo</th>
</tr>
<tr>
<td>Bugatti Veyron Super Sport</th>
<td>Molsheim, Alsace, France</th>
<!-- considering it is on the same folder that .html file -->
<td><img src=".\A.jpeg" alt="" border=3 height=100 width=300></img></th>
</tr>
<tr>
<td>SSC Ultimate Aero TT TopSpeed</th>
<td>United States</th>
<td border=3 height=100 width=100>Photo1</th>
</tr>
<tr>
<td>Koenigsegg CCX</th>
<td>Ängelholm, Sweden</th>
<td border=4 height=100 width=300>Photo1</th>
</tr>
<tr>
<td>Saleen S7</th>
<td>Irvine, California, United States</th>
<td border=3 height=100 width=100>Photo1</th>
</tr>
<tr>
<td> McLaren F1</th>
<td>Surrey, England</th>
<td border=3 height=100 width=100>Photo1</th>
</tr>
<tr>
<td>Ferrari Enzo</th>
<td>Maranello, Italy</th>
<td border=3 height=100 width=100>Photo1</th>
</tr>
<tr>
<td> Pagani Zonda F Clubsport</th>
<td>Modena, Italy</th>
<td border=3 height=100 width=100>Photo1</th>
</tr>
</table>
</body>
<html>
Ответ 2
На вашем HTML есть несколько синтаксических ошибок.
Сначала URL-адрес изображения должен указывать на адрес в общедоступном Интернете. Пользователи, просматривающие вашу страницу, не будут иметь ваш жесткий диск, поэтому указание на файл на локальном жестком диске не может работать. Замените C:\Pics на фактический URL-адрес изображения, а не путь к файловой системе машины разработки. Если вы хотите быть абсолютно уверенным, используйте другой компьютер и вставьте значение атрибута src тега img в адресную строку браузера. Если он там работает, тогда вы добры. Не делайте этого, чтобы путь был относительным и все еще действительным, но тогда он должен быть относительным к общедоступному URL-адресу веб-страницы, в которую он встроен.
Во-вторых, тег <title>. Вам нужно добавить этот тег, если вам нужен заголовок в браузере, и вы не можете его отформатировать.
Третья ошибка, если о теге <th>, вы должны добавить этот заголовок внутри тега <tr>, потому что <th> нужна строка (create by <tr>).
Другое дело, вам не нужен весь colspan, который вы сделали.
Я пытался сделать действительный html по мере необходимости. Посмотрите:
<!DOCTYPE html>
<html>
<head>
<title>CAR APPLICATION</title>
</head>
<body>
<center>
<h1>CAR APPLICATION</h1>
</center>
<table border="5" bordercolor="red" align="center">
<tr>
<th colspan="3">SONAKSHI RAINA 10B ROLL No:-32</th>
</tr>
<tr>
<th>Name</th>
<th>Origin</th>
<th>Photo</th>
</tr>
<tr>
<td>Bugatti Veyron Super Sport</td>
<td>Molsheim, Alsace, France</td>
<!-- considering it is on the same folder that .html file -->
<td><img src="H.gif" alt="" border=3 height=100 width=100></img></td>
</tr>
<tr>
<td>SSC Ultimate Aero TT TopSpeed</td>
<td>United States</td>
<td border=3 height=100 width=100>Photo1</td>
</tr>
<tr>
<td>Koenigsegg CCX</td>
<td>Ängelholm, Sweden</td>
<td border=4 height=100 width=300>Photo1</td>
</tr>
<tr>
<td>Saleen S7</td>
<td>Irvine, California, United States</td>
<td border=3 height=100 width=100>Photo1</td>
</tr>
<tr>
<td> McLaren F1</td>
<td>Surrey, England</td>
<td border=3 height=100 width=100>Photo1</td>
</tr>
<tr>
<td>Ferrari Enzo</td>
<td>Maranello, Italy</td>
<td border=3 height=100 width=100>Photo1</td>
</tr>
<tr>
<td> Pagani Zonda F Clubsport</td>
<td>Modena, Italy</td>
<td border=3 height=100 width=100>Photo1</td>
</tr>
</table>
</body>
<html>
Ответ 3
У вас есть TH, плавающий в верхней части таблицы, который не входит в TR. Исправьте это.
Что касается проблемы с изображением, вы полностью ссылаетесь на изображение с жесткого диска вашего компьютера. Не делайте этого.
У вас также есть закрывающий тег, которого не должно быть.
Это должно быть:
<img src="h.gif" alt="" border="3" height="100" width="100" />
Также это:
<table border = 5 bordercolor = red align = center>
Ваши colspans также перепутаны. Кажется, что у вас всего три столбца, но в вашем коде есть колпаны 14 и 4.
Должно быть:
<table border="5" bordercolor="red" align="center">
Также у вас нет объявленного DOCTYPE. Вы должны хотя бы добавить:
<!DOCTYPE html>
Ответ 4
Должно выглядеть:
<td colspan ='4'><img src="\Pics\H.gif" alt="" border='3' height='100' width='100' /></td>
.
<td> необходимо закрыть с помощью </td>
<img /> (в большинстве случаев) пустой тег. Закрывающий тег заменяется на /> вместо... как и для br
<br/>
Ваша структура html проста (извините), но это, вероятно, превратится в очень плохую совместимость между брусорами.
Кроме того, инкапсулируйте значение ваших атрибутов кавычками и избегайте использования upercase в тегах.
Ответ 5
Вы указали изображение как путь на своем компьютере (C:\etc\etc)... он находится там? Вы не ответили на вопросы других. Я взял ваш код, поместил его в Dreamweaver и работает отдельно от изображения, поскольку у меня его нет.
Проверьте местоположение, а затем сообщите нам.
Ответ 6
Попробуйте использовать "/" вместо "\" для пути к вашему изображению. Некоторые комментарии здесь, похоже, исходят от людей, которые не понимают, что некоторые из нас просто изучают веб-разработки, которые во многих случаях лучше всего делать на местном уровне. Поэтому вместо использования src= C:\Pics\H.gif используйте src= "C:/Pics/H.gif" для абсолютного пути или просто src= "Pics/H.gif" для относительного пути, если ваши фотографии в подкаталоге вашего местоположения страницы html). Также обратите внимание, что правильная практика заключается в том, чтобы окружать ваш путь кавычками. в противном случае у вас будут проблемы с путями, которые включают пробелы и другие нечетные символы.
Ответ 7
Или... Вы можете поместить изображение в якорный тег. Потому что у меня была такая же проблема, и я исправил ее без проблем. Многие люди используют локальные пути, прежде чем публиковать их сайт и фотографии. Просто убедитесь, что вы вернетесь и исправьте это на этапе окончательного редактирования.
