17 ����

Ŀ¼

17.1 ������

    �������������ݼ�Ĺ�ϵ���������ĵ�������ָ����Щ��ϵ������CSS�������ַ�ʽָ�����������Ӿ��ĺ������ġ�

    ���߿���ָ��һ��������Ӿ���ʽΪ��Ԫ����ɵij�����դ�񡣵�Ԫ��������п�����֯����������顣�С��С����顢�����Լ���Ԫ�����������Χ�б߿�CSS2�������ֱ߿�ģ�ͣ������߿�����һ����Ԫ����ˮƽ��ֱ�������ݣ�Ҳ������һ�л�һ�������е�Ԫ���ж������ݡ�

    ����Ҳ����ָ��������������֣���ͷ�����ݽ����˵�������ĵ������У����߿��Ա�ǵ�Ԫ��͵�Ԫ��������������Ⱦ����Ԫ���ͷ���ڵ�Ԫ������֮ǰ˵����Ч�����ǣ��⽫�����л����ñ����û���������ʽ�������ʱ��������һϵ�б�ͷ����������ݡ�

������

    ������HTML 4.0��������һ��3��3�еļ򵥱���

<TABLE>
<CAPTION>This is a simple 3x3 table</CAPTION>
<TR id="row1">
   <TH>Header 1      <TD>Cell 1        <TD>Cell 2
<TR id="row2">
   <TH>Header 2      <TD>Cell 3        <TD>Cell 4
<TR id="row3">
   <TH>Header 3      <TD>Cell 5        <TD>Cell 6
</TABLE>

    �ô��봴����һ������TABLEԪ�أ������У�TRԪ�أ���������ͷ��Ԫ��THԪ�أ��Լ��������ݵ�Ԫ��TDԪ�أ���ע�⣬������������е�ָ������ʽ�ģ���ͷ�����ݵ�Ԫ����Ҫ�����У����ж����С�

    �����CSS���򽫱�ͷ��Ԫ���е��ı���ˮƽ������ж��룬���Դ������ֳ������ݣ�

TH { text-align: center; font-weight: bold }

    ��һ�����򽫱�ͷ�ı��ڴ�ֱ�����������ߣ������ݵ�Ԫ��ֱ���У�

TH { vertical-align: baseline }
TD { vertical-align: middle }

    ��һ������ָ����һ�еı߿���3px����ʵ����ɫ�߿򣬶�����������1px����ʵ�ĺ�ɫ�߿�

TABLE   { border-collapse: collapse }
TR#row1 { border-top: 3px solid blue }
TR#row2 { border-top: 1px solid black }
TR#row3 { border-top: 1px solid black }

    ע�⣬�б߿����������ĵط��ǻ��ཻ���ġ���ô��һ�к͵ڶ��м�ı߿�Ӧ����ʲô��ɫ���ڵĻ������ģ������ٿ���1px����3px�������ǽ�������߿��ͻһ���м������ۡ�

    ����Ĺ��򽫱���ı�������ڱ���֮�ϣ�

CAPTION { caption-side: top }

    �������Ĺ���涨��һ����Ҫ������Ⱦ��ÿ������Ӧ�ö��ɡ�ͷ�����ݣ����ݡ���

TH { speak-header: once }

    ���磬��һ�н����ɣ���Header1 Cell1 Cell2��������������������µĹ���

TH { speak-header: always }

����Ӧ�ö��ɡ�Header1 Cell1 Header1 Cell2����

    ���������չʾ��CSS�����HTML 4.0Ԫ��Эͬ����HTML 4.0�У���ͬ����Ԫ�أ�TABLE��CAPTION��THEAD��TBODY��TFOOT��COL��COLGROUP��TH�Լ�TD�������嶨��dz���ȷ���������ĵ������У���XMLӦ�ã�������û��Ԥ����ı���Ԫ�ء����CSS2����������ӳ�䡱�ĵ�����Ԫ�ص�����Ԫ�أ�ͨ��'display'���ԡ����磬����Ĺ���ʹFOOԪ�ر�����ͬHTML��TABLEԪ�ض�BARԪ����ͬCAPTIONԪ�أ�

FOO { display : table }
BAR { display : table-caption }

    ���ǽ���һ�¸������۸��ֱ���Ԫ�ء����淶�У���������Ԫ��ָ�����κβ��뵽���񴴽���Ԫ�ء������ڲ�������Ԫ����ָ�����С����顢�С������Ԫ���Ԫ�ء�

17.2 CSS�ı���ģ��

    CSS����ģ�ͻ���HTML 4.0����ģ�ͣ�����Ľṹ�dz��ӽ�������Ӿ����֡���ģ���У��������һ����ѡ�ı����Լ������еĵ�Ԫ�񡣱���ģ��ͨ����Ϊ�������ȡ�����Ϊ�������ĵ���������ʽ��ָ���ж������С�һ�����е��б�ָ�����оͿ��Ա�����������ÿ���е�һ����Ԫ�����ڵ�һ�У��ڶ������ڵڶ��У��ȵȡ������п����ڽṹ�ϱ����飬����Ӧ�������У����磬��һ���е���Χ���ܻ���һ���߿򣩡�

    ��ˣ�����ģ�Ͱ����˱��񣬱��⣬�У����飬�У������Լ���Ԫ��

    CSSģ�Ͳ���Ҫ���ĵ�����������Ӧ��ЩԪ����ÿһ����Ԫ�ء�����ijЩ�ĵ����ԣ���XMLӦ�ã�����û��Ԥ����ı���Ԫ�أ�������߱��뽨���ĵ�����Ԫ�ص�����Ԫ�ص�ӳ�䡣����ͨ��'display'������ɵġ����µ�'display'ȡֵ��������������һ������Ԫ�أ�

table��HTML��TABLE��
ָ����һ��Ԫ�أ�������һ���鼶��������һ�������εĿ飬���������ʽ��������
inline-table��HTML��TABLE��
ָ����һ��Ԫ�أ�������һ��������������һ�������εĿ飬���������ڸ�ʽ��������
table-row��HTML��TR��
ָ��һ��Ԫ��Ϊ��Ԫ����ɵ��С�
table-row-group��HTML��TBODY��
ָ��һ��Ԫ�ؽ�һ�л���з��顣
table-header-group��HTML��THEAD��
����'table-row-group'�����Ƕ����Ӿ���ʽ�����ԣ������������������С���������ǰ��ʾ�������κζ��ñ���֮����ʾ���û����ڴ�ӡʱ�����ڱ�����չ��ÿҳ���ظ���ӡ��ע�С�
table-footer-group��HTML��TFOOT��
����'table-row-group'�����Ƕ����Ӿ���ʽ�����ԣ��������������������С���������֮����ʾ�������κε��ñ���֮ǰ��ʾ���û����ڴ�ӡʱ�����ڱ�����չ��ÿҳ���ظ���ӡ��ע�С�
table-column��HTML��COL��
ָ��һ��Ԫ�������˵�Ԫ���С�
table-column-group��HTML��COLGROUP��
ָ��һ��Ԫ�ؽ�һ�л���з��顣
table-cell��HTML��TD��TH��
ָ��һ��Ԫ�ش�����һ����Ԫ��
table-caption��HTML��CAPTION��
ָ���˱���ı��⡣

    ���һ��Ԫ�ص�'display'����Ϊ'table-column'��'table-column-group'�������ᱻ��Ⱦ����������Ϊ'display: none'һ�������������ǻ������õģ���Ϊ���ǿ�����Щ���Ի��������������������ijЩ�ض�����ʽ��

    ��¼�е�HTML 4.0ȱʡ��ʽ��չʾ����Щֵ��HTML 4.0�е�Ӧ�ã�

TABLE    { display: table }
TR       { display: table-row }
THEAD    { display: table-header-group }
TBODY    { display: table-row-group }
TFOOT    { display: table-footer-group }
COL      { display: table-column }
COLGROUP { display: table-column-group }
TD, TH   { display: table-cell }
CAPTION  { display: table-caption }

    �û��˿���������Щ'display'����ֵ����Ϊ���߲�Ӧ�øı�һ��Ԫ�ر���������Ϊ��

17.2.1 �����������

    ��HTML���ĵ����Կ��ܲ�����CSS2����ģ�������е�Ԫ�ء�����������£�����ٶ���Щ��ȱʧ����Ԫ�أ��Ա����ģ�Ϳ��Թ�����ȱʧ��Ԫ�ؽ����������������磬�Ӿ����񲼾��е������򣩡�����յĹ������£�

  1. �κα���Ԫ�ؽ��Զ�������Ҫ��������������Χ���������а�����������Ƕ�׶�������Ӧһ��'table'/'inline-table'Ԫ�أ�һ��'table-row'Ԫ�غ�һ��'table-cell'Ԫ�ء�
  2. ���'table-cell'Ԫ��T�ĸ�Ԫ��P����'table-row'����P/T֮������һ����Ӧ��'table-row'�Ķ��󡣸ö�����չ�����к�̵�T�ģ��ĵ����еģ��ֵ�'table-cell'��
  3. ���'table-row'Ԫ��T�ĸ�Ԫ��P����'table'��'inline-table'��'table-row-group'Ԫ�أ���P/T֮������һ����Ӧ��'table'�Ķ��󡣸ö�����չ�����к�̵�T�ģ��ĵ����еģ��ֵܣ�ֻҪ������Ҫһ��'table'��Ԫ�أ�'table-row'��'table-row-group'��'table-header-group'��'table-footer-group'��'table-column'��'table-column-group'�Լ�'caption'��
  4. ���'table-row-group'������'table-header-group'��'table-footer-group'��Ԫ��T�ĸ�Ԫ�ز���'table'��'inline-table'����P/T֮������һ����Ӧ��'table'Ԫ�صĶ��󡣸ö�����չ�����к�̵�T�ģ��ĵ����еģ��ֵܣ�ֻҪ������Ҫһ��'table'��Ԫ�أ�'table-row'��'table-row-group'��'table-header-group'��'table-footer-group'��'table-column'��'table-column-group'�Լ�'caption'��
  5. ���'table-row'Ԫ��P����Ԫ��T����'table-cell'Ԫ�أ���P/T֮������һ����Ӧ��'table-cell'Ԫ�صĶ��󡣸ö�����չ�����к�̵�T���ֵܣ�ֻҪ���Dz���'table-cell'Ԫ�ء�

���ӣ�

    �����XML�����У��ٶ�'table'Ԫ�ذ���HBOXԪ�أ�

<HBOX>
  <VBOX>George</VBOX>
  <VBOX>4287</VBOX>
  <VBOX>1998</VBOX>
</HBOX>

    ��Ϊ���������ʽ���ǣ�

HBOX { display: table-row }
VBOX { display: table-cell }

���ӣ�

    ����������У�Ϊ�˰���ROW�е����֣��ٶ�������'table-cell'Ԫ�ء�ע�⣬���ֻ��һ�����������м���У��������ӻ���ʽģ����������������

<STACK>
  <ROW>This is the <D>top</D> row.</ROW>
  <ROW>This is the <D>middle</D> row.</ROW>
  <ROW>This is the <D>bottom</D> row.</ROW>
</STACK>

    ��ʽ��Ϊ��

STACK { display: inline-table }
ROW   { display: table-row }
D     { display: inline; font-weight: bolder }

    �������Ϲ���HTML�û��˲�δ��Ҫ�󴴽���������

17.3 ��ѡ����

    ��Ԫ������������������ģ��к��С����ǣ���Դ�ļ��ܣ���Ԫ�����е��������������е����������ǣ�ͨ�������е����Ի��ǿ���Ӱ�쵥Ԫ���ijЩ���档

    ����������������к�����Ԫ�أ�

'border'
ֻ�е�����Ԫ�ص�'border-collapse'����Ϊ'collapse'ʱ���������еĸ����߿����ԡ�����ʱ�����������Լ������ϵı߿��ͨ������߿��ͻ�㷨�Ӷ�����ѡ��ÿ����Ԫ��߽�ı߿�
'background'
background�������������е�Ԫ��ı���������ֻ�е�Ԫ�����������͸������ʱ���á��μ�������IJ��͸���ԡ���
'width'
'width'���Ը������е���С���ȡ�
'visibility'
�������һ���е�'visibility'Ϊ'collapse'����ô���������еĵ�Ԫ�񶼲��ᱻ��Ⱦ�������쵽�����еĵ�Ԫ�񽫱����á����⣬����Ŀ���Ҳ����Ӧ���ٸ��б�Ӧռ�ݵĿ��ȡ��μ�����̬����Ч����������'visibility'��ȡֵû��Ч����

ʾ����

    ���������һЩ���������Ե���ʽ����ķ�����ͷ��������һ��ʵ����HTML 4.0�ġ��������ԣ�ȡֵΪ"cols"������������ʹ"totals"�г�Ϊ��ɫ�������������չʾ���ʹһ�еĿ��ȹ̶�����ͨ��ʹ���̶����񲼾��㷨ʵ�ֵġ�

COL   { border-style: none solid }
TABLE { border-style: hidden }
COL.totals { background: blue }
TABLE { table-layout: fixed }
COL.totals { width: 5em }

17.4 ���ӻ���ʽģ���еı���

    ����ν�����ӻ���ʽģ���У�������Ա���Ϊһ���������滻������Ԫ�ء����������ݣ��߰ף��߿�ͱ߾ࡣ

    �����������Σ�����Ԫ�ؽ�����һ����������������������ͱ��������еĻ���������ͱ����������������ݣ��߰ף��߾�ͱ߿����򡣸ó�����������ijߴ����ܰ������ߵ���С�ߴ硣��ֱ�߾��ڱ����ͱ�����ཻ���غϡ�������κ��ض�λ�������ƶ����������򣬶��������DZ���򣬴Ӷ����⽫��������ƶ���

A table with a caption above
it; both have margins and the margins between them are collapsed, as
is normal for vertical margins.   [D]

�Ϸ��б���ı���ʾ��ͼ������ĵױ߾������Ķ��߾��غϡ�

17.4.1 ���ⶨλ�Ͷ���

'caption-side'
ȡֵ��  top | bottom | left | right | inherit
��ʼֵ��  top
�����ڣ�  'table-caption'Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  �Ӿ�

    ������ָ���������Ա�����Ϊֹ��ȡֵ�ĺ������£�

top
������ڱ������Ϸ���
bottom
������ڱ������·���
left
������ڱ������󷽡�
right
������ڱ������ҷ���

    'table'Ԫ��֮�ϻ�֮�µı����ʽ��ʱ�ͺ��������DZ���֮ǰ��֮���һ����Ԫ��һ��������(1)���Ǽ̳б���Ŀɼ̳����ԣ�(2)�������֮ǰ���κ�'compact'��'run-in'Ԫ�أ����Dz�������Ϊ��һ�����

    ��һ��������ϻ��µı���Ҳ����Ϊһ������������ȼ��㣻���Ŀ��ȼ���Ҫ�ο�����������Ŀ��ȡ�

    ��һ���棬��������ڱ�������߻��ұߣ����'width'��ȡֵ����'auto'����ʽ�����ÿ��ȣ���'auto'�����û���ѡ��һ���������Ŀ��ȡ�������ܴӡ���խ���ܵĿ򡱵���һ���ߡ���������ǽ���������ұ���Ŀ��ȣ���Ҫ����'auto'��

    Ҫ�����������ڱ������ˮƽ���룬����ʹ��'text-align'���ԡ��������ұ����ڱ�����еĴ�ֱ���룬ʹ��'vertical-align'���ԡ������������Ψһ�������ȡֵ��'top'��'middle'�Լ�'bottom'��������ȡֵ����ͬΪ'top'��

Example(s):

    �����У�'caption-side'���Խ���������ڱ���ײ�������Ŀ��Ⱥͱ���Ԫ�ؿ�����ͬ�������ı�������롣

CAPTION { caption-side: bottom; 
          width: auto;
          text-align: left }

Example(s):

    ���������չʾ��ν������������߾��С�ͨ���������ұ߾�Ϊ'auto'���������Ǿ��еģ���������������ͱ���Ŀ�λ�Ƶ���߽磬����ͱ���Ŀ�����ͬ��

BODY {
    margin-left: 8em
}
TABLE {
    margin-left: auto;
    margin-right: auto
}
CAPTION {
    caption-side: left;
    margin-left: -8em;
    width: 8em;
    text-align: right;
    vertical-align: bottom
}

    �ٶ�����Ŀ���С�ڿ��ÿ��ȣ���ʽ���Ľ������������������

A centered table with a
caption in the left margin of the page   [D]

��ͼ��ʾ��Ϊ����'margin-left'����ȡֵ��������У��������쵽��߾ࡣ

17.5 �������ݵĿ��Ӳ���

    ��ͬ�����ĵ�������Ԫ�أ������ڲ�Ԫ�ز����������������ݡ��߰׺ͱ߿򡣵�������û�б߾ࡣ

    ��Щ��Ŀ��Ӳ�����һ�����μ�����������դ��Ŀ��ơ�ÿ����ռ��һЩդ��Ԫ�񣬶����������¹���ȷ���ġ���Щ����������HTML 4.0�����İ汾��HTMLҲ��ʵ����������������չ�����ơ�

  1. ÿ���п�ռ��һ�е�դ��Ԫ����Щ�п���һ����������Դ�ĵ��г��ֵ�˳���Զ�����������Ҳ����˵������ռ�ݺ���Ԫ������һ�����դ���У���
  2. ����ռ������������ռ�ݵ�դ��Ԫ��
  3. �п�ռ��һ������դ��Ԫ���С��п������dz��ֵ�˳�򰤸����С���һ�п����������Ҳ���������ұߣ���ȡ���ڱ����'direction'���ԡ�
  4. ����ռ������������ռ�ݵ�դ��Ԫ��
  5. ��Ԫ�������չ�������л��С�������CSS2��δ����������չ����Ŀ��ζ��壬�����û��˶�Դ�ĵ��������ر���˽⣻�Ժ�汾��CSSҲ�����ṩ��CSS�﷨��������һ���򡣣�ÿ����Ԫ�������һ�����п򣬿��Ⱥ͸߶�Ϊһ������դ��Ԫ�񡣸þ��εĶ����Ǹõ�Ԫ��ָ�����С��þ��α��뾡���ܿ��󣬵��Dz����Ը����κ�������Ԫ��򣬲���Դ�ĵ�ͬ�е�����������Ԫ��֮�ҡ�����Լ�����������'direction'����Ϊ'ltr'ʱ���ã����'direction'Ϊ'rtl'��ֻҪ�������еġ��󡱡����ҡ��������ɡ���
  6. ��Ԫ��򲻿������쳬���������������һ���п��û��˱��뽫������ֱ��������Ϊֹ��

ע�⣺��Ԫ�������Ի���Զ�λ�����Dz�������ô������λ�͸�������������Ƴ����Ӷ�Ӱ�����Ķ��롣

    �������������ӡ���һ�����Ǽٶ���HTML�ĵ��У�

<TABLE>
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
<TR><TD colspan="2">5
</TABLE>
<TABLE>
<ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4
<ROW><CELL colspan="2">5
</TABLE>

    �ڶ��������ʽ���������ͼ��ʾ��Ȼ����HTML�������Ⱦ��δ��HTML��ʽ���壬CSSҲ������ȥ����֮���û��˿���������Ⱦ֮����������ͼ��ʾ��������

One table with overlapping
cells and one without   [D]

��ͼ��ʾһ���д����HTML 4.0�����һ�ֿ��ܵ���Ⱦ����ͼ�����Ƶ�һ����HTML����Ψһ���ܵ���Ⱦ��

17.5.1 ����IJ��͸����

    Ϊ��ȷ��ÿ����Ԫ��ı�������ͬ�ı���Ԫ�ؿ��Ա�����Ϊ����һ��������εIJ����ϡ���һ���������õ�Ԫ�صı���ֻ�е�������IJ㶼��͸������ʱ�ſɼ���

schema of table layers   [D]

�����滮

  1. ��ײ���һ����һƽ�棬������������������п����ƣ���������͸���ġ�

  2. ��һ��������顣���������ͬ�ߣ�����һ��ˮƽ������������

  3. ����֮���Ǵ����п�����򡣺��������ƣ��������ͬ�ߣ�����һ��ˮƽ������������

  4. ��һ��������顣ÿ�����������ͬ��������һ�������Զ�������ȫ������������

  5. �����ڶ�������С���Ҳ������������

  6. ��������Ԫ����ͼ��ʾ���������е��а���ͬ�������ĵ�Ԫ�񣬵�����ÿ����Ԫ�����ض������ݡ���Щ���ա��ĵ�Ԫ����͸���ģ������ø��ײ��͸������

    �����У���һ�����ĸ���Ԫ�񣬵ڶ���û�е�Ԫ����˿��Կ������񱳾���������һ����Ԫ��ӵ�һ����չ�����С������HTML�������ʽ������

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <STYLE type="text/css">
      TABLE { background: #ff0; border-collapse: collapse }
      TD    { background: red; border: double black }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
    <TABLE>
      <TR>
        <TD> 1 
        <TD rowspan="2"> 2
        <TD> 3 
        <TD> 4 
      </TR>
      <TR><TD></TD></TR>
    </TABLE> 
  </BODY>
</HTML>

���ܱ���ʽ����������

Table with three empty cells
in bottom row   [D]

������������հ׵�Ԫ��ı���

17.5.2 ��������㷨��'table-layout'

    CSS��δ������ν�ġ��Ż����ı��񲼾֣���Ϊ�ںܶ�����£�ʲô���Ż������Ǹ�Ʒζ���⡣CSSȷʵ������һЩԼ�����û����ڱ��񲼾�ʱ�������ء��û��˿��������κ��������õ��㷨�����ҳ����ڡ��̶������㷨���£���������ѡ�������ٶȻ������Ⱦ��ȡ�

'table-layout'
ֵ�� auto | fixed | inherit
��ʼֵ�� auto
�����ڣ� 'table'��'inline-table'Ԫ��
�ɷ�̳У� ��
�ٷֱȣ� N/A
ý�飺 �Ӿ�

    'table-layout'���Կ����˲��ֱ���Ԫ���С��е��㷨��ȡֵ�ĺ������£�

fixed
���ù̶����񲼾��㷨
auto
�����κα��񲼾��㷨

    �������㷨�ֱ��������¡�

�̶����񲼾�

    �������֣����٣��㷨�������ˮƽ���ֲ������ڵ�Ԫ������ݣ���ֻ�����ڱ���Ŀ��ȣ��еĿ����Լ��߿��Ԫ��ļ����

    ����Ŀ��ȿ�����ʽ����'width'����ָ�������ȡֵΪ'auto'������'display: table'��'display: inline-table'����ζ��ʹ���Զ����񲼾��㷨��

    �ڹ̶����񲼾��㷨�У�ÿ���еĿ���������ȷ���ģ�

  1. �����Ԫ�ص�'width'����ȡֵ����'auto'����ô���еĿ���Ϊ��ָ��ֵ��
  2. �������е�һ����Ԫ������'width'���Բ���'auto'�����趨�˸��еĿ��ȡ������Ԫ����չ�����ɸ��У����Ƚ�������ƽ�֡�
  3. ������ƽ������ʣ�µı���ˮƽ�ռ䣨��ȥ�߿��Ԫ��������

    ��ˣ�����Ŀ��Ƚ��DZ���Ԫ��'width'����ֵ���п������ϵ�Ԫ������߿򣩺͵Ľϴ�ֵ�����������п�������Ŀռ佫���䵽�������С�

    ����������£��û������յ�������һ�к�Ϳ��Կ�ʼ���񲼾֡������еĵ�Ԫ��Ӱ���п��������Ԫ�������������������'overflow'����ȷ���Ƿ񽨲���������ݡ�

�Զ����񲼾�

    �ڱ��㷨�У�һ��Ҫ�󲻳������ν�����������Ŀ������п����Լ�������߿������������㷨�����˱��淶д��ʱ���ɳ���HTML�û��˵���Ϊ�����'table-layout'Ϊ'auto'��UA������Ҫ��ʵʩ���㷨��ȷ�����񲼾֣����ǿ���ʹ���κ������㷨��

    ���㷨���ܲ���ô��Ч����Ϊ��Ҫ���û�����ȷ�����ղ���ǰ������еı������ݣ�������Ҫ�����һ�εĽ�����

    �п���������ȷ���ģ�

  1. ����ÿ����Ԫ�����С���ݿ��ȣ�MCW��������ʽ�������ݿ�����չ���ü��У����Dz����������Ԫ������ָ���ĵ�Ԫ��'width'��W������MCW��W����Ϊ��С��Ԫ����ȡ�'auto'��ζ��MCWΪ��С��Ԫ����ȡ�

    ���⣬����ÿ����Ԫ��ġ���󡱵�Ԫ����ȣ���������ʽ�ķ��У������ݲ����еĽ��и�ʽ����

  2. ����ÿһ�У�����ֻռ���е���Щ��Ԫ��ȷ��һ��������С���п�����Сֵ����MCW�����Ǹ���Ԫ��Ŀ��ȣ����е�'width'��ȡ�ϴ�ģ������ֵ�������Ԫ��������ĵ�Ԫ����ȣ����е�'width'��ȡ�ϴ�ģ���
  3. ������չ�����ɸ��е�ÿ����Ԫ��������Щ�е���С���ȣ�ʹ����Щ�п�����һ�����ٺ͵�Ԫ��ͬ��������������Ҳ����������������ܵĻ���ÿ����չ���������ӵĿ���Ӧ������ͬ��

    ��������ÿ���о͵õ���������С���ȡ��п�������Ӱ�����ձ���Ŀ��ȵģ�

  1. ���'table'��'inline-table'Ԫ�ص�'width'���Բ���'auto'������ָ��ֵ��W���������Եļ���ֵӦ���������ߵĽϴ�ֵ��W���Լ�������Ҫ�����С���ȼ��ϵ�Ԫ������߿�MIN�������W����MIN����ô����Ŀ��Ƚ����䵽������ȥ��
  2. ���'table'��'inline-table'Ԫ��������'width: auto'����ô����õ��ı������ӦΪ�����ߵĽϴ�ֵ��MIN���Լ����������Ŀ��ȡ�Ȼ��������м��ϵ�Ԫ������߿�Ҫ��������ȣ�MAX��С�ڰ�����Ŀ��ȣ�ʹ��MAX��

    �п�����ǰٷֱȣ�������ڱ�����ȡ��������������'width: auto'����ô�ٷֱȱ�ʾ���п���Լ����UAӦ�ó��������Լ����������Ȼ���Ⲣ���ǿ��ܵģ�����п���'110%'����ô��Լ�����޷�����ġ���

ע�⣺�ڸ��㷨�У��У������飩���У������飩��Լ����Ҳ��Լ�������ǰ����ĵ�Ԫ��ijߴ硣�����п����ܼ��Ӱ�����иߣ���֮��Ȼ��

17.5.3 ����߶��㷨

    ����ĸ߶���'table'��'inline-table'��'height'���������ȡֵΪ'auto'����ζ�Ÿ߶����и߼��ϵ�Ԫ������߿���ۺϡ��κ�����ȡֵ����ʽָ���߶ȣ����������ܱ����и����ĸ߻�͡��������߶Ⱥ����ݸ߶Ȳ�һ�£�CSS2��δָ����Ⱦ�������ر���δ˵�����ݸ߶��Ƿ�Ӧ��Խָ���ĸ߶ȣ��������߶ȴ������ݸ߶ȣ�������и�Ӧ��η��䣻���߷�������������ݸ߶ȴ���ָ���ı���߶ȣ�UA�Ƿ�Ӧ���ṩ�������ơ�ע�⣺�����汾��CSS���ܻ�ָ�������

    һ��UA����������е�Ԫ�񣬾Ϳ��Լ���'table-row'Ԫ�ؿ�ĸ߶ȣ���������ָ����'height'���ֵ�͵�Ԫ��Ҫ�����С�߶ȣ�MIN���Ľϴ��ߡ����'table-row'��'height'ȡֵΪ'auto'������ζ�ż�����ĸ߶�ӦΪMIN��MINȡ���ڵ�Ԫ���߶Ⱥ͵�Ԫ���Ķ��루���������߿��ĸ߶ȼ��㣩�����ָ�������к�����'height'�İٷֱȣ�CSS2��δ����ðٷֱ�Ӧ�����ĸ��߶ȡ�

    CSS2�У�һ����Ԫ���ĸ߶�Ӧ�DZ���Ԫ��'height'���Ժ�����������С�߶ȣ�MIN���нϴ��ֵ�����'height'ȡֵΪ'auto'����ζ�ż���ֵΪMIN����Ԫ��'height'���ָ��Ϊ�ٷֱȣ�CSS2��δ����ðٷֱ�Ӧ�����ĸ��߶ȡ�

    CSS2Ҳû��ָ�������Ԫ����չ�������еĻ��������Ӱ��߶ȵļ��㣬������㣺�иߵĺ�Ӧ���㹻������԰�����չ�������еĵ�Ԫ��

    ÿ����Ԫ���'vertical-align'���Ծ����������ڵĶ��뷽ʽ��ÿ����Ԫ�����ݶ���һ�����ߣ�һ�����ߡ����ߺ͵��ߡ����������ơ��ڱ����������У�'vertical-align'��ȡֵ�������£�

baseline
��Ԫ����ߺ�������չ�����е�һ�еĻ���һ���ߣ����ڵ�Ԫ����еĻ��ߵĶ���μ����ģ���
top
��Ԫ���Ķ��ߺ�������չ�����е�һ�еĶ���һ���ߡ�
bottom
��Ԫ���ĵ��ߺ�������չ���������һ�еĵ���һ���ߡ�
middle
��Ԫ������ߺ�����չ���е�����һ���ߡ�
sub, super, text-top, text-bottom
��Щֵ�Ե�Ԫ�����ã���Ԫ����û��߶��롣

    ��Ԫ��Ļ����ǵ�Ԫ���е�һ���߿��Ļ��ߡ����û���ı�����ô���߾��Ǹõ�Ԫ������ʾ������ʲô����Ļ��ߣ����û���κζ�����ô��ȡ��Ԫ���ĵ��ߡ�����������'vertical-align: baseline'�ĵ�Ԫ���У���Ԫ��򶥵����ߵ������뽫���������еĻ��ߡ��뿴������

Example of vertically
aligning the cells   [D]

ͼ����ʾ��Ԫ��ͬ��'vertial-align'ȡֵ��Ч��

    ��Ԫ���1��2���ڻ��߶��롣��Ԫ���2�ڻ����ϵĸ߶���ߣ���˾;����˸��еĻ��ߡ�ע�⣬���û�е�Ԫ�����ڻ��߶��룬��ô���о�û�У�Ҳ����Ҫ�����ߡ�

    Ϊ�˱������壬��Ԫ��Ķ��밴������˳����У�

  1. ���ȣ����ڻ��߶���ĵ�Ԫ��õ���λ�������Ϳ��Եõ����еĻ��ߡ����ţ���λ'vertical-align: top'�ĵ�Ԫ��
  2. ���ڣ���������һ�����ߡ�Ҳ�������˻��ߣ��Լ�һ����ʱ�ĸ߶ȡ����ǵ�ǰ��λ�ĵ�Ԫ�񶥵���͵ĵ׵ľ��롣���μ�����ĵ�Ԫ��߰���������
  3. ����κ�������Ԫ������뷽ʽ�ǵ��߻����ߣ�����߶ȱ�Ŀǰ���и�Ҫ�󣬸��еĸ߶Ƚ�ͨ�����͵��ߵķ�ʽ���ﵽ��Щ��Ԫ�������ĸ߶ȡ�
  4. ��󣬶�λ��Щ�����ĵ�Ԫ��

    �����Ԫ���ĸ߶�С���иߣ���ô������ö���Ķ���ױ߰ס�

17.5.4 ���ڵ�ˮƽ����

    ��Ԫ�����ݵ�ˮƽ������'text-align'����ָ����

    ���һ�������ɸ���Ԫ���'text-align'��������Ϊһ��<string>ֵ����Щ��Ԫ�񽫶�����һ����ֱ���ߡ��ַ����Ŀ�ʼ��Ӵ����ᡣ�ַ�����ȷ�����ַ��������������߻����ұߡ�

    ���������ı�ֻ�����ı�������һ������ʾʱ����Ӿ�������Ԫ�������ж��У���ô�����δ������ġ�

    ���һ����Ԫ���'text-align'ȡֵΪһ���ַ��������Ǹ��ַ������ʳ����ڵ�Ԫ�������У���ô��Ԫ�����ݵĽ�β�Ӵ�����Ĵ�ֱ�ᡣ

    ��Щ�ַ�����һ��ÿ����Ԫ����ͬ������ͨ������˵ġ�

    CSS��δ�ṩһ�ַ�����ָ����ֱ������������п�ߵ�ƫ�ơ�

Example(s):

    ���µ���ʽ����

   TD { text-align: "." }
   TD:before { content: "$" }

    ��ʹ����HTML�����е���ЩǮ���У�

  <TABLE>
  <COL width="40">
  <TR> <TH>Long distance calls
  <TR> <TD> 1.30
  <TR> <TD> 2.50
  <TR> <TD> 10.80
  <TR> <TD> 111.01
  <TR> <TD> 85.
  <TR> <TD> 90
  <TR> <TD> .05
  <TR> <TD> .06
  </TABLE>

����С���㡣Ϊ�˺��棬��������:beforeαԪ����ÿ������ǰ������Ԫ���š�������ܱ���Ⱦ��������

Long distance calls
              $1.30      
              $2.50
             $10.80
            $111.01
             $85.
             $90
               $.05
               $.06

17.5.5 ��̬����Ч��

    �С����顢�С������'visibility'���Կ���ȡֵΪ'collapse'����ʹ�������л��б��Ƴ���ʾ������Щ����ͨ��Ҫռ�õ�λ��Ϊ�����������á����ǣ����еĽ�ֹ��ʾ����Ӱ�����IJ��֡����ǵ���Լ�����ܵĸı䣬���������̬���Ƴ��������е�Ч��������ǿ�����±��񲼾֡�

17.6 �߿�

    CSS����������ȫ��ͬ�ķ������õ�Ԫ��ı߿�һ�����ʺ����ڶ����ĵ�Ԫ����������ν������߿���һ���ʺ����ôӱ���һ�˵���һ�˵������߿򡣺ܶ�߿���ʽ�����������ж�����ʵ�֣��������ĸ��������Ǹ�ƫ�����⡣

'border-collapse'
ֵ�� collapse | separate | inherit
��ʼֵ�� collapse
�����ڣ� 'table'��'inline-table'Ԫ��
�ɷ�̳У� ��
�ٷֱȣ� N/A
ý�飺 �Ӿ�

    ������ѡ���˱���߿�ģ�͡�ȡֵΪ'separate'��ѡ�����߿�ģ�͡�ȡֵ'collapse'ѡ���غϵı߿�ģ�͡��ֱ��������¡�

17.6.1 ����ı߿�ģ��

'border-spacing'
ֵ�� <length> <length>? | inherit
��ʼֵ�� 0
�����ڣ� 'table'��'inline-table'Ԫ��
�ɷ�̳У� ��
�ٷֱȣ� N/A
ý�飺 �Ӿ�

    ����ָ���˷ָ����ڵ�Ԫ��߿�ľ��롣���ָ��һ�����ȣ���ָ����ˮƽ�ʹ�ֱ�ļ�ࡣ��������������ȣ���һ��ָ��ˮƽ��࣬���ڶ���ָ����ֱ��ࡣ���Ȳ������Ǹ�����

    ����ģ���У�ÿ����Ԫ����һ�������ı߿�'border-spacing'����ָ�������ڵ�Ԫ��߿��ľ��롣�ÿռ��ɱ���Ԫ�صı�����䡣�С��С���������鲻�����б߿�Ҳ����˵���û��˱���������ЩԪ�صı߿����ԣ���

Example(s):

    ��ͼ�еı�����������������ʽ���Ľ����

  TABLE      { border: outset 10pt; 
               border-collapse: separate;
               border-spacing: 15pt }
  TD         { border: inset 5pt }
  TD.special { border: inset 10pt }  /* The top-left cell */

A table with
border-spacing   [D]

һ�������'border-spacing'����Ϊ����ֵ��ע��ÿ����Ԫ�����Լ��ı߿򣬶�����Ҳ���Լ��ı߿�

�յ�Ԫ�ı߿�'empty-cells'����

'empty-cells'
ֵ�� show | hide | inherit
��ʼֵ�� show
�����ڣ� 'table-cell' elements
�ɷ�̳У� ��
�ٷֱȣ� N/A
ý�飺 �Ӿ�

    �ڷ���߿�ģ���У������Կ�����û�п������ݵĵ�Ԫ����Χ�߿����Ⱦ���յ�Ԫ���Լ�'visibility'����Ϊ'hidden'�ĵ�Ԫ�񶼱���Ϊ��û�п������ݡ��������ݰ���"&nbsp;"�Լ������հף�����ASCII CR��"\0D"����LF��"\0A"��, tab��"\09"���Ϳո�"\20"����

    ���������ȡֵΪ'show'���հ׵�Ԫ����Χ�ử���߿򣨺�һ��ĵ�Ԫ��һ������

    ȡֵΪ'hide'��ζ���ڿյ�Ԫ����Χ�����߿򡣸���һ��˵�����һ�������е�Ԫ�������ȡֵ��Ϊ'hide'���Ҷ�û���κο������ݣ���ô���о���ͬ������'display: none'һ����

Example(s):

    ����Ĺ���ʹ���еĵ�Ԫ����Χ��Ҫ�����߿�

TABLE { empty-cells: show }

17.6.2 �غϵı߿�ģ��

    ���غϵı߿�ģ���У��п���ָ��һ���߿���Χ�Ƶ�Ԫ���С����顢�С������ȫ���򲿷֡�HTML��"rule"���Կ��������ַ�ʽ��ָ����

    �߿�λ�ڵ�Ԫ����դ�������ġ��û��˱����ҵ�һ��ͳһ�Ĺ�����ȡ���������Ϊ������λ����Ļ���ص㣬��ӡ������ȣ��������

    �����ͼ����ʾ�˱�����ȡ��߿���ȡ��߰��Լ���Ԫ������ν����ġ����ǵĹ�ϵ����ʽ�������Ա����ÿһ�ж����ã�

row-width = (0.5 * border-width0) + padding-left1 + width1 + padding-right1 + border-width1 + padding-left2 +...+ padding-rightn + (0.5 * border-widthn)

    �����n�������ڵ�Ԫ�����������border-widthi������Ԫ��i��i + 1��ı߿�ע�⣬��������ı߿�ֻ��һ����������ȡ�����һ�����ڱ߾������С�

Schema showing the widths of
cells and borders and the padding of cells   [D]

��ʾ��Ԫ�񡢱߿��Լ���Ԫ��߰׵�ͼ�Ρ�

    ע�⣬�ڸ�ģ���У�����Ŀ��Ȱ�������߿��һ�롣ͬʱ����ģ���У�����û�б߰ף������б߾ࣩ��

����߿��ͻ

    ���غϱ߿�ģ���У�ÿ����Ԫ��ÿ�����ϵı߿���ܱ����������������ĸ���Ԫ�أ���Ԫ���У����飬�У������Լ����������ı߿�����ָ��������Щ�߿�Ŀ��ȡ���ʽ����ɫ�����ܲ���ͬ��׼����ǣ���ÿ�����ϣ�����������򡱵ı߿���ʽ��ѡ�У����dz������κ�һ��'hidden'��ʽ�Ӷ��������Ľ��߿�ر��ˡ�

    ����Ĺ���˵�����г�ͻ������£���ѡ���ĸ��߿���ʽ��

  1. �߿������'border-style'Ϊ'hidden'����ô�������ȼ������κ��������ͻ�ı߿��κα߿�ֻҪ�и�ȡֵ�������Ƹ�λ�õ����б߿�
  2. �߿��������������'none'����ô�������ȼ�����͵ġ�ֻ���ڸñ߻㼯������Ԫ�صı߿����Զ���'none'���ñ߿�Żᱻʡ�ԣ�������ע�⣬'none'�DZ߿���ʽ��ȱʡֵ����
  3. ���û���ĸ���ʽΪ'hidden'������������һ������'none'����ô��ȸ����ı߿���Խ�խ�ı߿�ᱻ���ԡ�������ɸ��߿��'border-width'һ������ô��ʽ�����ȴ������£�'double'��'solid'��'dashed'��'dotted'��'ridge'��'outset'��'groove'������͵ģ�'inset'��
  4. ����߿���ʽֻ����ɫ�ϵ�������ô��Ԫ�����ʽ���ȣ�Ȼ�����еģ�����ģ��еģ�����ģ�����DZ���ġ�

Example(s):

    �����������ʾ�����������Ӧ�á���ʽ�����£�

  TABLE          { border-collapse: collapse;
                   border: 5px solid yellow; }
  *#col1         { border: 3px solid black; }
  TD             { border: 1px solid red; padding: 1em; }
  TD.solid-blue  { border: 5px dashed blue; }
  TD.solid-green { border: 5px solid green; }

    HTMLԴ�ļ���

<P>
<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">
<TR id="row1">
    <TD> 1
    <TD> 2
    <TD> 3
</TR>
<TR id="row2">
    <TD> 4 
    <TD class="solid-blue"> 5
    <TD class="solid-green"> 6
</TR>
<TR id="row3">
    <TD> 7
    <TD> 8
    <TD> 9
</TR>
<TR id="row4">
    <TD> 10
    <TD> 11
    <TD> 12
</TR>
<TR id="row5">
    <TD> 13
    <TD> 14
    <TD> 15
</TR>
</TABLE>

    ���ܲ������µ�Ч����

An example of a table with collapsed borders   [D]

�غϱ߿�ģ���е�һ����������

Example(s):

    �������������ʾ��һ���������м��зָ��ߡ�����Ķ��߿�����Ϊ'hidden'�������˵�һ�еĶ��߿����ʵ����HTML 4.0�е�"rules"���ԣ�rules="rows"����

TABLE[rules=rows] TR { border-top: solid }
TABLE[rules=rows]    { border-collapse: collapse; 
                       border-top: hidden }

Table with horizontal
rules    [D]

�����м�ˮƽ�ָ��ߵı���

    �����У�������TABLE��'hidden'�߿�Ҳ���Դﵽͬ����Ч����ֻҪ�Ե�һ�ж������ü��ɡ�ϲ�����ĸ�����������ϲ�����⡣

TR:first-child { border-top: none }
TR { border-top: solid }

Example(s):

    ��������һ������չʾ�����غϵı߿�

Table
with two omitted borders   [D]

�����������ʡ�Ե��ڲ��߿�

    HTMLԴ�ļ���

<TABLE style="border-collapse: collapse; border: solid;">
<TR><TD style="border-right: hidden; border-bottom: hidden">foo</TD>
    <TD style="border: solid">bar</TD></TR>
<TR><TD style="border: none">foo</TD>
    <TD style="border: solid">bar</TD></TR>
</TABLE>

17.6.3 �߿���ʽ

    ijЩ'border-style'��ȡֵ�ڱ����еĺ����������Ԫ���еĺ��岻ͬ���±������Ǻű�����

none
û�б߿�
*hidden
����'none'���������غϱ߿�ģ���л�ͬʱ���������߿򣨲μ�����߿��ͻconflictsһ�ڣ���
dotted
�߿���һϵ�еĵ㡣
dashed
�߿���һϵ�еĶ��ߡ�
solid
�߿���һ��ʵ�ߡ�
double
�߿���˫ʵ�ߡ������߼�ֻ���հ׵ľ���֮�͵���'border-width'��ֵ��
groove
�߿���������Ƕ��滭ƽ�档
ridge
��'grove'�෴���߿���������ͻ���ڻ滭ƽ�档
*inset
������߿�ģ���У��߿�ʹ��������������Ƕ��滭ƽ�档���غϱ߿�ģ���У�����'groove'��
*outset
������߿�ģ��l�У��߿�ʹ��������������ͻ���ڻ滭ƽ�档���غϱ߿�ģ���У�����'ridge'��

17.7 �������Ƶ��Ⱦ

    �������ͨ��һ������������˵�������ݵ�Ԫ���ͷ��Ԫ��֮��Ĺ�ϵ�����Բ�ͬ��ˮƽ�ʹ�ֱ����ķ�ʽ˵������Щ������������������û��Զ�ά�ķ�ʽ�ڱ������ƶ�������������Ƕ�Ӧ�Կռ��ʾ�Ĺ�ϵ�Ŀ��ܡ�������ǿ��ܵģ���ʽ������ָ��ͷҪ���ĸ�����˵����

17.7.1 ��ͷ��������'speak-header'����

'speak-header'
ֵ�� once | always | inherit
��ʼֵ�� once
�����ڣ� �б���ͷԪ����Ϣ��Ԫ��
�ɷ�̳У� ��
�ٷֱȣ� N/A
ý�飺 ��Ƶ

    ������ָ������ͷ�Ƿ���ÿ����Ԫ��ǰ˵������ֻ����ij����Ԫ�������ͷ��ǰһ����ͬʱ˵����ȡֵ�ĺ������£�

once
ͷֻ˵һ�Σ���һϵ�е�Ԫ��֮ǰ��
always
ͷ����صĵ�Ԫ��ǰ˵����

    ÿ���ĵ����Կ����в�ͬ�Ļ�����������ָ��ͷ�����磬��HTML 4.0��[HTML40]���У����������ֲ�ͬ��������ָ��ͷ��Ϣ��"headers"��"scope"�Լ�"axis"���������Щ����û�б�ָ�������淶�ṩ��һ���㷨��ȷ��ͷ��Ϣ��

Image of a table created in MS
Word   [D]

����ͷ��Ԫ��ı���ͼ�Σ�"San Jose"��"Seattle"�����������������õ����ݵ�ͬһ�л��С�

    ���HTML������ʾ���������ص㣨San Jose��Seattle�����������컨����ʳƷ��ס�޺ͽ�ͨ����ķ��á�������˵������Խ����������ΪNά�ġ���Щά���������ص㣬���ڣ�����Լ�С�ơ�ijЩ��Ԫ������һ�����ϵı�ǣ�������һЩ�������ڸÿռ���ij���ϻ��ѵĽ�Ǯ����������Դ�ļ����£�

<TABLE>
<CAPTION>Travel Expense Report</CAPTION>
<TR>
  <TH></TH>
  <TH>Meals</TH>
  <TH>Hotels</TH>
  <TH>Transport</TH>
  <TH>subtotal</TH>
</TR>
<TR>
  <TH id="san-jose" axis="san-jose">San Jose</TH>
</TR>
<TR>
  <TH headers="san-jose">25-Aug-97</TH>
  <TD>37.74</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="san-jose">26-Aug-97</TH>
  <TD>27.28</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="san-jose">subtotal</TH>
  <TD>65.02</TD>
  <TD>224.00</TD>
  <TD>90.00</TD>
  <TD>379.02</TD>
</TR>
<TR>
  <TH id="seattle" axis="seattle">Seattle</TH>
</TR>
<TR>
  <TH headers="seattle">27-Aug-97</TH>
  <TD>96.25</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="seattle">28-Aug-97</TH>
  <TD>35.00</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="seattle">subtotal</TH>
  <TD>131.25</TD>
  <TD>218.00</TD>
  <TD>72.00</TD>
  <TD>421.25</TD>
</TR>
<TR>
  <TH>Totals</TH>
  <TD>196.27</TD>
  <TD>442.00</TD>
  <TD>162.00</TD>
  <TD>800.27</TD>
</TR>
</TABLE>

    �����ַ�ʽ�ṩ����ģ�ͣ����߾�ʹ�ÿ��Է�������������������÷dz��ḻ�ķ������������������磬ÿ����Ԫ�������Ϊ�б�˵������ÿ�����ݵ�Ԫ��֮ǰ�ظ����õ�ͷ��

  San Jose, 25-Aug-97, Meals:  37.74
  San Jose, 25-Aug-97, Hotels:  112.00
  San Jose, 25-Aug-97, Transport:  45.00
 ...

    �����Ҳ������ͷ�ı�ʱ��˵�����ǣ�

San Jose, 25-Aug-97, Meals: 37.74
    Hotels: 112.00
    Transport: 45.00
  26-Aug-97, Meals: 27.28
    Hotels: 112.00
...