5.2.7 Заполнение ячейки Text
Займемся ячейкой Text (рис. 21).
Рис. 21 Разработка внешнего вида web-страницы
Ее содержимое можно разделить на 3 таблицы, которые последовательно идут друг за другом (рис. 22).
Рис. 22 Разработка макета части web-страницы
Создадим таблицу Form для формы. Главная сложность здесь - сделать отступы от края ячейки Text и при этом растянуть таблицу Form на 100% ширину. Указать padding-left и padding-right для ячейки Text мы не можем, т.к. следующая таблица - с заголовком - должна прижиматься к границам ячейки. Если сделать для таблицы Form width=100%, то не получится указать margin-left и margin-right: в IE таблица уйдет куда-то за границы экрана. Значит, укажем только margin-top и margin-bottom, а отступы слева и справа реализуем за счет свойства ячеек padding-left и padding-right.
В CSS можно писать параметры padding и margin в формате: padding: top right bottom left. Например: padding: 0px 1px 2px 3px;. Воспользуемся этим, чтобы сократить наш html-код.
index.html
<table class="form">
<tbody>
<tr>
<td class="formtext">City:</td>
<td class="forminput"><select class="input"><option value="">select a city</option></select></td>
<td class="formtext">Bedroom(s):</td>
<td class="forminput"><select class="input"><option value="">any number</option></select></td>
</tr>
<tr>
<td class="formtext">State:</td>
<td class="forminput"><select class="input"><option value="">select a state</option></select></td>
<td class="formtext">Bathroom(s):</td>
<td class="forminput"><select class="input"><option value="">any number</option></select></td>
</tr>
<tr>
<td class="formtext">Price Range:</td>
<td class="forminput"><select class="input"><option value="">all prices</option></select></td>
<td class="formtext"></td>
<td class="forminput"><input type="submit" value="Search!" class="submit" /></td>
</tr>
</tbody>
</table>
style.css
table.form {
width: 100%;
border-collapse: collapse;
margin: 5px 0px 5px 0px;}
td.formtext {
padding: 5px 5px 5px 15px;
font-weight: bold;
width: 20%;}
td.forminput {
padding: 5px 15px 5px 5px;
width: 30%;}
input.submit {
background-color: #dddedf;
font-weight: bold;
width: 100%;}
select.input {
width: 100%;}
Для таблицы и ячейки с заголовком можно воспользоваться уже созданными в ранее классами hdrtab и hdr. Добавили только width="100%", чтобы ячейка hdr растягивалась на 100% по ширине и подтягивала надпись "Our Best Proposals" к левому краю:
<table class="hdrtab">
<tbody>
<tr>
<td><img width="7" height="37" border="0" src="hdrtabpic.jpg" alt="" /></td>
<td width="100%" class="hdr">Our best proposals:</td>
</tr>
</tbody>
</table>
Для ячеек третьей таблицы - назовем ее Content - воспользуемся созданным ранее классом newsitem. Для ячеек с изображениями создадим дополнительный класс image, в котором пропишем выравнивание по центру ячейки. Плюс сами изображения обведем серой линией шириной 1 пкс. Для заголовка используем уже имеющийся класс hdr2. Для таблицы Content укажем отступы (margin) от границ ячейки Text. Сама таблица не будет 100%-й ширины (т.к. тогда margin не работает корректно). Растягивать ее на всю ячейку будет текст, который в ней содержится.
index.html
<table class="content">
<tbody>
<tr>
<td class="newsitem image">
<img width="136" height="105" border="0" src="house1.jpg" class="border" alt="" /></td>
<td class="newsitem">
<h2 class="hdr2">Article title goes here</h2>
Lorem ipsum dolor sit amet... <a href="">>></a></td>
</tr>
<tr>
<td class="newsitem image">
<img width="135" height="94" border="0" src="house2.jpg" class="border" alt="" /></td>
<td class="newsitem">
<h2 class="hdr2">Article title goes here</h2>
Lorem ipsum dolor sit amet... <a href="">>></a></td>
</tr>
<tr>
<td class="newsitem image">
<img width="135" height="88" border="0" src="house3.jpg" class="border" alt="" /></td>
<td class="newsitem">
<h2 class="hdr2">Article title goes here</h2>
Lorem ipsum dolor sit amet... <a href="">>></a></td>
</tr>
</tbody>
</table>
style.css
table.content {
border-collapse: collapse;
margin: 6px 8px 8px 12px;}
td.image {
padding: 10px;
text-align: center;
vertical-align: middle;}
img.border {
border: 1px solid silver;}
Ячейка Text заполнена. Посмотрите html-страницу, а также полный текст файлов index.html и style.css. Синим цветом в файлах помечен html-код, который мы добавили сейчас.
Main.html
<html>
<head>
<title>Layout</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table class="main">
<tr>
<td class="top" colspan="2">
<table class="main">
<tr>
<td><img src="house.jpg" width="285" height="165" border="0"></td>
<td class="logo"><img src="logo.gif" width="206" height="27" border="0"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="search">
<form action="">
<table class="main">
<tr>
<td class="searchitem hdr">search</td>
<td class="searchitem" width="100%"><input type="text" name="Search" style="width: 100%"></td>
<td class="searchitem"><input type="image" src="button.jpg" width="22" height="39" border="0"></td>
</tr>
</table>
</form>
</td>
<td class="topmenu">
<table class="main">
<tr>
<td class="menuitem"><a class="menu" href="">Home</a></td>
<td class="menuitem"><a class="menu" href="">News</a></td>
<td class="menuitem"><a class="menu" href="">About Us</a></td>
<td class="menuitem"><a class="menu" href="">Catalog</a></td>
<td class="menuitem"><a class="menu" href="">Contacts</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="shadowleft"><img src="shadowleftpic.jpg" width="6" height="5" border="0"></td>
<td class="shadowright"><img src="shadowrightpic.jpg" width="7" height="5" border="0"></td>
</tr>
<tr>
<td class="news">
<table class="newstable" cellspacing="5">
<tr>
<td class="newsitem">
<h2 class="hdr2">Contact information</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
</table>
<table class="hdrtab">
<tr>
<td class="hdr">News</td>
</tr>
</table>
<table class="newstable" cellspacing="5">
<tr>
<td class="newsitem">
<h2 class="hdr2">News title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
<tr>
<td class="newsitem">
<h2 class="hdr2">News title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
<tr>
<td class="newsitem">
<h2 class="hdr2">News title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
</table>
</td>
<td class="text">
<table class="form">
<tr>
<td class="formtext">Sity:</td>
<td class="forminput"><select class="input"><option value="">select a city</select></td>
<td class="formtext">Bedroom(s):</td>
<td class="forminput"><select class="input"><option value="">any number</select></td>
</tr>
<tr>
<td class="formtext">State:</td>
<td class="forminput"><select class="input"><option value="">select a state</select></td>
<td class="formtext">Bathroom(s):</td>
<td class="forminput"><select class="input"><option value="">any number</select></td>
</tr>
<tr>
<td class="formtext">Price Range:</td>
<td class="forminput"><select class="input"><option value="">all prices</select></td>
<td class="formtext"></td>
<td class="forminput"><input class="submit" type="Submit" value="Search!"></td>
</tr>
</table>
<table class="hdrtab">
<tr>
<td><img src="hdrtabpic.jpg" width="7" height="37" border="0"></td>
<td class="hdr" width="100%">Our best proposals:</td>
</tr>
</table>
<table class="content">
<tr>
<td class="newsitem image"><img class="border" src="house1.jpg" width="136" height="105" border="0"></td>
<td class="newsitem">
<h2 class="hdr2">Article title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut a ullamcorper suscipit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
<tr>
<td class="newsitem image"><img class="border" src="house2.jpg" width="135" height="94" border="0"></td>
<td class="newsitem">
<h2 class="hdr2">Article title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut a ullamcorper suscipit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
<tr>
<td class="newsitem image"><img class="border" src="house3.jpg" width="135" height="88" border="0"></td>
<td class="newsitem">
<h2 class="hdr2">Article title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut a ullamcorper suscipit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="copyright">
<table class="main">
<tr>
<td class="cprghtitem">Copyright © RealErtateCompany.com</td>
</tr>
</table>
</td>
<td class="bottommenu">
<table class="main">
<tr>
<td class="btmenuitem">
<a class="menu" href="">Home</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">News</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">About Us</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">Catalog</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">Contacts</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
index.html
<html>
<head>
<title>Layout</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table class="main">
<tr>
<td class="top" colspan="2">
<table class="main">
<tr>
<td><img src="house.jpg" width="285" height="165" border="0"></td>
<td class="logo"><img src="logo.gif" width="206" height="27" border="0"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="search">
<form action="">
<table class="main">
<tr>
<td class="searchitem hdr">search</td>
<td class="searchitem" width="100%"><input type="text" name="Search" style="width: 100%"></td>
<td class="searchitem"><input type="image" src="button.jpg" width="22" height="39" border="0"></td>
</tr>
</table>
</form>
</td>
<td class="topmenu">
<table class="main">
<tr>
<td class="menuitem"><a class="menu" href="">Home</a></td>
<td class="menuitem"><a class="menu" href="">News</a></td>
<td class="menuitem"><a class="menu" href="">About Us</a></td>
<td class="menuitem"><a class="menu" href="">Catalog</a></td>
<td class="menuitem"><a class="menu" href="">Contacts</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="shadowleft"><img src="shadowleftpic.jpg" width="6" height="5" border="0"></td>
<td class="shadowright"><img src="shadowrightpic.jpg" width="7" height="5" border="0"></td>
</tr>
<tr>
<td class="news">
<table class="newstable" cellspacing="5">
<tr>
<td class="newsitem">
<h2 class="hdr2">Contact information</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
</table>
<table class="hdrtab">
<tr>
<td class="hdr">News</td>
</tr>
</table>
<table class="newstable" cellspacing="5">
<tr>
<td class="newsitem">
<h2 class="hdr2">News title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
<tr>
<td class="newsitem">
<h2 class="hdr2">News title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
<tr>
<td class="newsitem">
<h2 class="hdr2">News title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
</table>
</td>
<td class="text">
<table class="form">
<tr>
<td class="formtext">Sity:</td>
<td class="forminput"><select class="input"><option value="">select a city</select></td>
<td class="formtext">Bedroom(s):</td>
<td class="forminput"><select class="input"><option value="">any number</select></td>
</tr>
<tr>
<td class="formtext">State:</td>
<td class="forminput"><select class="input"><option value="">select a state</select></td>
<td class="formtext">Bathroom(s):</td>
<td class="forminput"><select class="input"><option value="">any number</select></td>
</tr>
<tr>
<td class="formtext">Price Range:</td>
<td class="forminput"><select class="input"><option value="">all prices</select></td>
<td class="formtext"></td>
<td class="forminput"><input class="submit" type="Submit" value="Search!"></td>
</tr>
</table>
<table class="hdrtab">
<tr>
<td><img src="hdrtabpic.jpg" width="7" height="37" border="0"></td>
<td class="hdr" width="100%">Our best proposals:</td>
</tr>
</table>
<table class="content">
<tr>
<td class="newsitem image"><img class="border" src="house1.jpg" width="136" height="105" border="0"></td>
<td class="newsitem">
<h2 class="hdr2">Article title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut a ullamcorper suscipit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
<tr>
<td class="newsitem image"><img class="border" src="house2.jpg" width="135" height="94" border="0"></td>
<td class="newsitem">
<h2 class="hdr2">Article title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut a ullamcorper suscipit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
<tr>
<td class="newsitem image"><img class="border" src="house3.jpg" width="135" height="88" border="0"></td>
<td class="newsitem">
<h2 class="hdr2">Article title goes here</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut a ullamcorper suscipit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliq <a href="">>></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="copyright">
<table class="main">
<tr>
<td class="cprghtitem">Copyright © RealErtateCompany.com</td>
</tr>
</table>
</td>
<td class="bottommenu">
<table class="main">
<tr>
<td class="btmenuitem">
<a class="menu" href="">Home</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">News</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">About Us</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">Catalog</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">Contacts</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
style.css
html, body {
margin:0px;
padding:0px;
}
body, input, select, textarea {
background-color: #ffffff;
}
td, input, select, textarea {
font-family: Tahoma;
font-size: 11px;
color: #000000;
vertical-align: top;
}
td {
padding: 0px;
}
table.main {
width: 100%;
height: 100%;
border-collapse: collapse;
}
td.top {
background-image: url(top_bg.jpg);
height: 165px;
}
td.logo {
width: 100%;
text-align: right;
padding-top: 55px;
padding-right: 55px;
}
td.search {
background-image: url(search_bg.jpg);
background-color: #dce1e9;
height: 39px;
}
td.topmenu {
background-image: url(topmenu_bg.jpg);
background-color: #ff8e51;
}
td.searchitem {
vertical-align: middle;
text-align: center;
padding-right: 11px;
}
form {
margin: 0px;
}
td.hdr {
vertical-align: middle;
text-transform: uppercase;
font-weight: bold;
font-size: 10px;
background-image: url(dots.gif);
background-repeat: no-repeat;
background-position: 10px;
padding-left: 21px;
}
td.menuitem {
vertical-align: middle;
text-align: center;
width: 20%;
background-image: url(menuitem_bg.jpg);
background-repeat: no-repeat;
background-position: right;
}
a.menu {
text-decoration: none;
text-transform: uppercase;
color: #ffffff;
font-weight: bold;
font-size: 10px;
}
td.shadowleft, td.shadowright {
background-image: url(shadow.jpg);
height: 5px;
}
td.shadowleft {
text-align: right;
}
td.news {
background-image: url(news_bg.jpg);
background-repeat: repeat-y;
background-position: right;
width: 30%;
padding-right: 6px;
}
table.newstable {
width: 100%;
}
td.newsitem {
background-image: url(newsitem_bg.jpg);
background-repeat: repeat-x;
border: 1px solid silver;
padding: 10px;
text-align: justify;
}
h2.hdr2 {
text-transform: uppercase;
font-weight: bold;
font-size: 10px;
color: #c63c3c;
margin-bottom: 7px;
}
a {
text-decoration: none;
color: #c63c3c;
}
table.hdrtab {
border-collapse: collapse;
background-image: url(hdrtab_bg.jpg);
background-color: #dce1e9;
height: 37px;
width: 100%;
}
td.text {
background-image: url(text_bg.jpg);
background-repeat: repeat-y;
width: 70%;
height: 100%;
}
table.form {
width: 100%;
border-collapse: collapse;
margin: 5px 0px 5px 0px;
}
td.formtext {
padding: 5px 5px 5px 15px;
font-weight: bold;
width: 20%;
}
td.forminput {
padding: 5px 15px 5px 5px;
width: 30%;
}
input.submit {
background-color: #dddedf;
font-weight: bold;
width: 100%;
}
select.input {
width: 100%;
}
table.content {
border-collapse: collapse;
margin: 6px 8px 8px 12px;
}
td.image {
padding: 10px;
text-align: center;
vertical-align: middle;
}
img.border {
border: 1px solid silver;
}
td.copyright {
padding-right: 5px;
height: 32px;
}
td.cprghtitem {
border-top: 1px solid #cacaca;
background-color: #f5f5f5;
vertical-align: middle;
text-align: center;
color: #656565;
font-size: 10px;
}
td.bottommenu {
background-image: url(bottom_bg.jpg);
background-color: #ff8e51;
height: 32px;
}
td.btmenuitem {
background-image: url(bottom_shadow.jpg);
background-repeat: no-repeat;
vertical-align: middle;
text-align: center;
}