Làm cách nào để xóa khoảng trống thừa giữa các hàng và cột trong bảng.
Tôi đã thử thay đổi lề, phần đệm và các thuộc tính viền khác nhau trên bảng và tr và td.
Tôi muốn tất cả các hình ảnh ở ngay cạnh nhau trông giống như một hình ảnh lớn.
Làm thế nào tôi nên sửa lỗi này?
CSS
table {
border-collapse: collapse;
}
HTML
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tera Byte Video Game Creation Camp</title>
<link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body>
<table class="mytable" align="center">
<tr class="header">
<td colspan="3"><img src="images/home_01.png" /></td>
</tr>
<tr class="top">
<td colspan="3"><img src="images/home_02.png" /></td>
</tr>
<tr class="link-row">
<td><img src="images/home_03.png" /></td>
<td><img src="images/home_04.png" /></td>
<td><img src="images/home_05.png" /></td>
</tr>
<tr class="link-row">
<td><img src="images/home_07.png" /></td>
<td><img src="images/home_06.png" /></td>
<td><img src="images/home_08.png" /></td>
</tr>
<tr class="link-row">
<td><img src="images/home_09.png" /></td>
<td><img src="images/home_10.png" /></td>
<td><img src="images/home_11.png" /></td>
</tr>
<tr class="link-row">
<td><img src="images/home_12.png" /></td>
<td><img src="images/home_13.png" /></td>
<td><img src="images/home_14.png" /></td>
</tr>
<tr class="bottom">
<td colspan="3"><img src="images/home_15.png" /></td>
</tr>
</table>
</body>
</html>