|
Пример таблицы, содержащей три строки с четырьмя столбцами, каждый из которых сопровождается заголовком:
1. | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> |
2. | <HTML> |
3. | <HEAD> |
4. | <TITLE>Заголовок столбца таблицы - TH</TITLE> |
5. | </HEAD> |
6. | <BODY> |
7. | <TABLE border="border" > |
8. | <COLGROUP style="background:#cadceb;border-top:5px solid grey;"> |
9. | <col><col><col> |
10. | <TR><TH>Заголовок 1 <TH>Заголовок 2<TH>Заголовок 3<TH>Заголовок 4 |
11. | <TR><TD>Lettuce<TD><TD>Lettuce<TD> |
12. | <TR><TD>Silver carrots <TD>.50<TD>Lettuce<TD> |
13. | <TR><TD>Golden turnips <TD>0.30<TD>Lettuce<TD> |
14. | </TABLE> |
15. | </BODY> |
16. | </HTML> |
17. |
rowspan | Атрибут определяет количество строк, на которых располагается ячейка. Его значение по умолчанию 1. Значение равное 0 означает, что ячейка будет охватывать все строки, начиная от текущей строки и заканчивая последней строки таблицы. |
colspan | Атрибут определяет количество столбцов, на которых располагается ячейка. Его значение по умолчанию 1. Значение равное 0 означает, что ячейка будет охватывать все столбцы, начиная от текущего столбца и заканчивая последним столбцом таблицы. |
nowrap | Данный атрибут не рекомендован к применению. Данный атрибут запрещает перенос строк в ячейке, вместо него рекомендовано применять CSS свойство word-spacing. |
Атрибут colspan определяет количество столбцов, на которых располагается ячейка.
1. | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> |
2. | <HTML> |
3. | <HEAD> |
4. | <TITLE>Сolspan</TITLE> |
5. | |
6. | </HEAD> |
7. | <BODY> |
8. | <TABLE border="border"> |
9. | <CAPTION>Cups of coffee consumed by each senator</CAPTION> |
10. | <TR> <TH>Name <TH>Cups <TH>Type of Coffee <TH>Sugar? |
11. | <TR> <TD>T. Sexton <TD>10 <TD>Espresso <TD>No |
12. | <TR> <TD>J. Dinnen <TD>5 <TD>Decaf <TD>Yes |
13. | <TR> <TD>A. Soria <TD colspan="3"><em>Not available</em> |
14. | </TABLE> |
15. | |
16. | </BODY> |
17. | </HTML> |
18. |
Атрибут rowspan определяет количество столбцов, на которых располагается ячейка.
1. | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> |
2. | <HTML> |
3. | <HEAD> |
4. | <TITLE>rowspan</TITLE> |
5. | |
6. | </HEAD> |
7. | <BODY> |
8. | <TABLE border="border" width="200px"> |
9. | <TR><TD>1 <TD rowspan="2">2 <TD>3 |
10. | <TR><TD>4 <TD>6 |
11. | <TR><TD>7 <TD>8 <TD>9 |
12. | </TABLE> |
13. | </BODY> |
14. | </HTML> |
15. |
left | выравнивание внутри ячейки по левому краю |
right | выравнивание внутри ячейки по правому краю |
justify | выравнивание внутри ячейки по ширине ячейки |
char | выравнивание внутри ячейки по определенному символу |
top | выравнивание внутри ячейки по верхнему краю |
bottom | выравнивание внутри ячейки по нижнему краю |
middle | выравнивание внутри ячейки по центру вертикальной оси |
baseline | выравнивание внутри ячейки по центру вертикальной оси |
1. | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> |
2. | <HTML> |
3. | <HEAD> |
4. | <TITLE>Вертикальное и горизонтальное выравнивание в ячейках таблицы</TITLE> |
5. | </HEAD> |
6. | <BODY> |
7. | <TABLE border="border" width="300px"> |
8. | <COLGROUP style="background:#cadceb;border-top:5px solid grey;"> |
9. | <col><col><col> |
10. | <TR><TH>Вертикальное и горизонтально выравнивание в ячейках таблицы |
11. | <TR><TD align="center">Выравнивание по центру |
12. | <TR><TD align="left">Выравнивание по левому краю |
13. | <TR><TD align="right">Выравнивание по правому краю |
14. | <TR><TD align="justify">Выравнивание по ширине |
15. | <TR><TD align="char" char=".">Выравнивание по символу "." |
16. | <TR><TD height="70px" valign="top">Выравнивание по верхнему краю |
17. | <TR><TD height="70px" valign="bottom">Выравнивание по нижнему краю |
18. | <TR><TD height="70px" valign="baseline">Выравнивание по базовой линии |
19. | <TR><TD height="70px" valign="middle">Выравнивание по середине |
20. | </TABLE> |
21. | </BODY> |
22. | </HTML> |
23. |
Выравнивание в ячейке, как горизонтально, так и вертикальное может устанавливаться несколькими способами - с помощью атрибута align самой ячейки, либо с помощью выравнивания внутри ячейки установкой выравнивания для определенного элемента, расположенного внутри ячейки, либо унаследования значений атрибута align от родительских элементов. Однако, может возникнуть ситуация, когда все вышеуказанные способы будут воздействовать на содержимое ячейки одновременно, в этом случае трудно определить как будет выровнено содержимое ячейки. Для недопущения этого существуют правила определяющие приоритет определенных способов выравнивания, расположенные в порядке уменьшения приоритета:
Если браузер не поддерживает выравнивание по ширине (justify), то данное выравнивание будет заменено выравниванием по левому краю.