Код вашей страницы

<html>
<body>
<p>
Каждая таблица начинается с тега table.
Каждая строчка таблицы начинается с тега tr.
Каждая ячейка таблицы начинается с тега td.
</p>
<h4>Таблица из одной колонки:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>Одна строчка из трех колонок:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Две строчки по три колонки:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Результат в окне браузера
Каждая таблица начинается с тега table. Каждая строчка таблицы начинается с тега tr. Каждая ячейка таблицы начинается с тега td.
Таблица из одной колонки:
100
Одна строчка из трех колонок:
100 200 300
Две строчки по три колонки:
100 200 300
400 500 600
Код вашей страницы
<html>
<body>
<h4>Таблица с обычной рамкой:</h4>
<table border="1">
<tr>
<td>Первая</td>
<td>строчка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строчка</td>
</tr>
</table>
<h4>С широкой рамкой:</h4>
<table border="8">
<tr>
<td>Первая</td>
<td>строчка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строчка</td>
</tr>
</table>
<h4>С очень широкой рамкой:</h4>
<table border="15">
<tr>
<td>Первая</td>
<td>строчка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строчка</td>
</tr>
</table>
</body>
</html>
Результат в окне браузера
Таблица с обычной рамкой:
Первая строчка
Вторая строчка
С широкой рамкой:
Первая строчка
Вторая строчка
С очень широкой рамкой:
Первая строчка
Вторая
Код вашей страницы
<html>
<body>
<h4>Это таблица без рамок:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>Эта таблица тоже без рамок:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Результат в окне браузера
Это таблица без рамок:
100 200 300
400 500 600
Эта таблица тоже без рамок:
100 200 300
400 500 600
Код вашей страницы
<html>
<body>
<h4>Заголовки таблицы:</h4>
<table border="1">
<tr>
<th>Имя</th>
<th>Телефон</th>
<th>Телефон</th>
</tr>
<tr>
<td>Билл Гейтс</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Вертикальные заголовки:</h4>
<table border="1">
<tr>
<th>Имя:</th>
<td>Билл Гейтс</td>
</tr>
<tr>
<th>Телефон:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Телефон:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Результат в окне браузера
Заголовки таблицы:
Имя Телефон Телефон
Билл Гейтс 555 77 854 555 77 855
Вертикальные заголовки:
Имя: Билл Гейтс
Телефон: 555 77 854
Телефон: 555 77 855
Код вашей страницы
<html>
<body>
<table border="1">
<tr>
<td>Текст</td>
<td>Текст</td>
</tr>
<tr>
<td></td>
<td>Текст</td>
</tr>
</table>
<p>
Как вы видите, одна ячейка не имеет рамки. Это связано с тем, что она пуста. Попробуйте вставить пробел в эту ячейку. Рамка все равно не появилась.
</p>
<p>
Чтобы сделать рамку, надо вставить в эту ячейку неразрывный пробел.
</p>
<p>Неразрывный пробел вставляется с помощью специального кода (так как является специальным символом). Если вы не знаете, что такое спецсимволы, прочитайте об этом справку.
</p>
<p>Для вставки неразрывного пробела, надо набрать код « ».
</p>
<p>
</p>
</body>
</html>
Результат в окне браузера
Текст Текст
Текст
Как вы видите, одна ячейка не имеет рамки. Это связано с тем, что она пуста. Попробуйте вставить пробел в эту ячейку. Рамка все равно не появилась.
Чтобы сделать рамку, надо вставить в эту ячейку неразрывный пробел.
Неразрывный пробел вставляется с помощью специального кода (так как является специальным символом). Если вы не знаете, что такое спецсимволы, прочитайте об этом справку.
Для вставки неразрывного пробела, надо набрать код «&nbsр;».
Код вашей страницы
<html>
<body>
<h4>
Эта таблица с широкой рамкой и названием
</h4>
<table border="6">
<caption>Название</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Результат в окне браузера
Эта таблица с широкой рамкой и названием
Название
100 200 300
400 500 600
Код вашей страницы
<html>
<body>
<h4>Ячейки состоит из двух колонок:</h4>
<table border="1">
<tr>
<th>Имя</th>
<th colspan="2">Телефон</th>
</tr>
<tr>
<td>Билл Гейтс</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Ячейка состоит из двух строк:</h4>
<table border="1">
<tr>
<th>Имя:</th>
<td>Билл Гейтс</td>
</tr>
<tr>
<th rowspan="2">Телефон:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Результат в окне браузера
Ячейки состоит из двух колонок:
Имя Телефон
Билл Гейтс 555 77 854 555 77 855
Ячейка состоит из двух строк:
Имя: Билл Гейтс
Телефон: 555 77 854
555 77 855
Код вашей страницы
<html>
<body>
<table border="1">
<tr>
<td>
<p>Это параграф.</p>
<p>Это еще один параграф.</p>
</td>
<td>В этой ячейке расположена таблица:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Эта ячейка содержит список:
<ul>
<li>яблоки</li>
<li>бананы</li>
<li>ананасы</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
Результат в окне браузера
Это параграф.
Это еще один параграф. В этой ячейке расположена таблица:
A B
C D
Эта ячейка содержит список:
• яблоки
• бананы
• ананасы HELLO
Код вашей страницы
<html>
<body>
<h4>Без отступа между рамкой и содержимым ячейки:</h4>
<table border="1">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>С отступом между рамкой и содержимым ячейки:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
</body>
</html>
Результат в окне браузера
Без отступа между рамкой и содержимым ячейки:
Первая строка
Вторая строка
С отступом между рамкой и содержимым ячейки:
Первая строка
Вторая строка
Код вашей страницы
<html>
<body>
<h4>Без отступа между ячейками:</h4>
<table border="1">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>С отступом между ячейками:</h4>
<table border="1"
cellspacing="10">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
</body>
</html>
Результат в окне браузера
Без отступа между ячейками:
Первая строка
Вторая строка
С отступом между ячейками:
Первая строка
Вторая строка
Код вашей страницы
<html>
<body>
<h4>Цвет фона:</h4>
<table border="1"
bgcolor="red">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>Изображение как фон:</h4>
<table border="1"
background="skype.jpeg">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
</body>
</html>
Результат в окне браузера
Цвет фона:
Первая строка
Вторая строка
Изображение как фон:
Первая строка
Вторая строка
Код вашей страницы
<html>
<body>
<h4>Фон ячейки:</h4>
<table border="1">
<tr>
<td bgcolor="red">Первая</td>
<td>строка</td>
</tr>
<tr>
<td
background="skype.jpeg">
Вторая</td>
<td>строка</td>
</tr>
</table>
</body>
</html>
Результат в окне браузера
Фон ячейки:
Первая строка
Вторая строка
Код вашей страницы
<html>
<body>
<table width="400" border="1">
<tr>
<th align="left">Деньги потрачены на....</th>
<th align="right">Январь</th>
<th align="right">Февраль</th>
</tr>
<tr>
<td align="left">Одежда</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">Косметика</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">Питание</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">Сумма</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>
Результат в окне браузера
Деньги потрачены на.... Январь Февраль
Одежда $241.10 $50.20
Косметика $30.00 $44.45
Питание $730.40 $650.00
Сумма $1001.50 $744.65
Код вашей страницы
<html>
<body>
<p>
Если вы не видите рамки вокруг таблицы, значит ваш браузер устарел или не поддерживает эту технологию.
</p>
<h4>С атрибутом frame="border":</h4>
<table frame="border">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>С атрибутом frame="box":</h4>
<table frame="box">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>С атрибутом frame="void":</h4>
<table frame="void">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>С атрибутом frame="above":</h4>
<table frame="above">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>С атрибутом frame="below":</h4>
<table frame="below">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>С атрибутом frame="hsides":</h4>
<table frame="hsides">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>С атрибутом frame="vsides":</h4>
<table frame="vsides">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>С атрибутом frame="lhs":</h4>
<table frame="lhs">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>С атрибутом frame="rhs":</h4>
<table frame="rhs">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
</body>
</html>
Результат в окне браузера
Если вы не видите рамки вокруг таблицы, значит ваш браузер устарел или не поддерживает эту технологию.
С атрибутом frame="border":
Первая строка
Вторая строка
С атрибутом frame="box":
Первая строка
Вторая строка
С атрибутом frame="void":
Первая строка
Вторая строка
С атрибутом frame="above":
Первая строка
Вторая строка
С атрибутом frame="below":
Первая строка
Вторая строка
С атрибутом frame="hsides":
Первая строка
Вторая строка
С атрибутом frame="vsides":
Первая строка
Вторая строка
С атрибутом frame="lhs":
Первая строка
Вторая строка
С атрибутом frame="rhs":
Первая строка
Вторая строка
Код вашей страницы
<html>
<body>
<p>
Если вы не видите рамки вокруг таблицы, значит ваш браузер устарел или не поддерживает эту технологию.
</p>
</p>
<table frame="hsides" border="3">
<tr>
<td>Первая строка</td>
</tr>
</table>
<br />
<table frame="vsides" border="3">
<tr>
<td>Первая строка</td>
</tr>
</table>
</body>
</html>
Результат в окне браузера
Если вы не видите рамки вокруг таблицы, значит ваш браузер устарел или не поддерживает эту технологию.
Первая строка
Первая строка

Комментарии

Комментариев нет.