HTML таблица, заголовок таблицы, ширина ячейки

Информация о материале

 

HTML таблица, заголовок таблицы, ширина ячейки

 

html таблица

HTML ширина ячейки таблицы и ее высота (размер ячеек)

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

<html>
<head>
<title>Пример таблицы: HTML высота ячейки и ее ширина, размеры ячеек</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="12">
<tr>
<td width="200" height="100">ячейка 1, первый ряд</td>
<td>ячейка 2, первый ряд</td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td>ячейка 2, второй ряд</td>
</tr>
</table> 
</body>
</html>

Результат:

ячейка 1, первый ряд

ячейка 2, первый ряд

ячейка 1, второй ряд

ячейка 2, второй ряд

Были установлены размеры первой ячейки из первого ряда. В итоге вторая ячейка, этого же ряда унаследовала высоту первой, а первая ячейка, второгo ряда — ее ширину (ширину первой ячейки, первого ряда). Такова особенность взаимодействия элементов HTML таблицы.

 

Горизонтальное HTML выравнивание в таблице и в ячейке, текст

HTML выравнивание внутри таблицы. Текст слева, справа, по центру ячеек таблицы:

<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="17" width="450">
<tr height="100">
<td align="left">ячейка 1</td>
<td align="right">ячейка 2</td>
<td align="center">ячейка 3</td>
</tr>
</table> 
</body>
</html>

Результат:

ячейка 1

ячейка 2

ячейка 3

 

Вертикальное выравнивание текста внутри HTML таблицы

HTML выравнивание в таблице. Текст вверху, внизу, по центру ячеек таблицы:

<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="17" width="450">
<tr height="100">
<td valign="top">ячейка 1</td>
<td valign="bottom">ячейка 2</td>
<td valign="middle">ячейка 3</td>
</tr>
</table> 
</body>
</html>

Результат:

ячейка 1

ячейка 2

ячейка 3

Атрибут valign определяет вертикальное выравнивание текста внутри таблицы.

 

Теги, определяющие заголовок HTML таблицы

HTML заголовки таблицы:

<html>
<head>
<title>Примеры заголовков</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
</table> 
</body>
</html>

Результат:

Заголовок

Заголовок

Заголовок

Текст

Текст

Текст

Текст

Текст

Текст

Теги <th> </th> определяют заголовок HTML таблицы.

 

HTML таблица по центру, с левой, с правой стороны

Горизонтальное расположение HTML таблицы внутри web-страницы:

<html>
<head>
<title>Примеры HTML таблиц</title>
</head>
<body>
<table align="center" width="220" bgcolor="#006699">
<tr height="220">
<td>
<p>align="center"</p>
</td>
</tr>
</table>
   <table align="left" width="220" height="220" bgcolor="#cc0000">
   <tr>
   <td>
   <p>align="left"</p>
   </td>
   </tr>
   </table>
<table align="right" width="220" height="220" bgcolor="#66cc66">
<tr>
<td>
<p>align="right"</p>
</td>
</tr>
</table>
</body>
</html>

Результат: HTML таблица по центру страницы, слева, справа

В примере выше показаны три отдельные таблицы, каждая из которых состоит из одной ячейки.bgcolor – HTML атрибут – определяет цвет фона. В предыдущем уроке мы использовали его CSSаналог – background-color.

 

HTML таблица расположена внутри ячейки

Пример:

<html>
<head>
<title>Примеры HTML таблицы</title>
</head>
<body>
<table border="1" cellspacing="0" bgcolor="#cccccc">
<tr>
<td width="150" height="100"> &nbsp; </td>
<td width="150" align="center">
    <table border="1" cellspacing="5" style="background-color:#ffffff; width:80px; height:60px">
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    </table>
</td>
</tr>
</table> 
</body>
</html>



Результат: HTML таблица внутри ячейки другой таблицы

Внутри второй ячейки находится еще одна таблица со своими атрибутами, значениями и стилями.

Размеры и фон внутренней таблицы, в отличае от внешней, заданы с помошью CSS.