Ŀ¼
�������������ݼ�Ĺ�ϵ���������ĵ�������ָ����Щ��ϵ������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 }
���ǽ���һ�¸������۸��ֱ���Ԫ�ء����淶�У���������Ԫ��ָ�����κβ��뵽������Ԫ�ء������ڲ�������Ԫ����ָ�����С����顢�С������Ԫ���Ԫ�ء�
CSS����ģ�ͻ���HTML 4.0����ģ�ͣ�����Ľṹ�dz��ӽ�������Ӿ����֡���ģ���У��������һ����ѡ�ı����Լ������еĵ�Ԫ����ģ��ͨ����Ϊ�������ȡ�����Ϊ�������ĵ���������ʽ��ָ���ж������С�һ�����е��б�ָ�����оͿ��Ա�����������ÿ���е�һ����Ԫ�����ڵ�һ�У��ڶ������ڵڶ��У��ȵȡ������п����ڽṹ�ϱ����飬����Ӧ�������У����磬��һ���е���Χ���ܻ���һ���߿�
��ˣ�����ģ�Ͱ����˱����⣬�У����飬�У������Լ���Ԫ��
CSSģ�Ͳ���Ҫ���ĵ�����������Ӧ��ЩԪ����ÿһ����Ԫ�ء�����ijЩ�ĵ����ԣ���XMLӦ�ã�����û��Ԥ����ı���Ԫ�أ�������߱��뽨���ĵ�����Ԫ�ص�����Ԫ�ص�ӳ�䡣����ͨ��'display'������ɵġ����µ�'display'ȡֵ��������������һ������Ԫ�أ�
���һ��Ԫ�ص�'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'����ֵ����Ϊ���߲�Ӧ�øı�һ��Ԫ�ر���������Ϊ��
��HTML���ĵ����Կ��ܲ�����CSS2����ģ�������е�Ԫ�ء�����������£�����ٶ���Щ��ȱʧ����Ԫ�أ��Ա����ģ�Ϳ��Թ�����ȱʧ��Ԫ�ؽ����������������磬�Ӿ������е�����������յĹ������£�
�����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�û��˲�δ��Ҫ����������
��Ԫ������������������ģ��к��С����ǣ���Դ�ļ��ܣ���Ԫ�����е��������������е����������ǣ�ͨ�������е����Ի��ǿ���Ӱ�쵥Ԫ���ijЩ���档
����������������к�����Ԫ�أ�
���������һЩ���������Ե���ʽ����ķ�����ͷ��������һ��ʵ����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 }
����ν�����ӻ���ʽģ���У�������Ա���Ϊһ���������滻������Ԫ�ء����������ݣ��߰ף��߿�ͱ߾ࡣ
�����������Σ�����Ԫ�ؽ�����һ����������������������ͱ��������еĻ���������ͱ����������������ݣ��߰ף��߾�ͱ߿����ó�����������ijߴ����ܰ������ߵ���С�ߴ硣��ֱ�߾��ڱ����ͱ�����ཻ���غϡ�������κ��ض�λ�������ƶ������������������DZ���Ӷ����⽫��������ƶ���
ȡֵ�� | top | bottom | left | right | inherit |
��ʼֵ�� | top |
�����ڣ� | 'table-caption'Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | N/A |
ý�飺 | �Ӿ� |
������ָ���������Ա�����Ϊֹ��ȡֵ�ĺ������£�
'table'Ԫ��֮�ϻ�֮�µı����ʽ��ʱ�ͺ��������DZ���֮ǰ��֮���һ����Ԫ��һ��������(1)���Ǽ̳б���Ŀɼ̳����ԣ�(2)�������֮ǰ���κ�'compact'��'run-in'Ԫ�أ����Dz�������Ϊ��һ�����
��һ��������ϻ��µı���Ҳ����Ϊһ������������ȼ��㣻���Ŀ��ȼ���Ҫ�ο�����������Ŀ��ȡ�
��һ���棬��������ڱ���������ұߣ����'width'��ȡֵ����'auto'����ʽ�����ÿ��ȣ���'auto'�����û���ѡ��һ���������Ŀ��ȡ�������ܴӡ���խ���ܵĿ���һ���ߡ���������ǽ���������ұ���Ŀ��ȣ���Ҫ����'auto'��
Ҫ�����������ڱ������ˮƽ���룬����ʹ��'text-align'���ԡ��������ұ����ڱ�����еĴ�ֱ���룬ʹ��'vertical-align'���ԡ������������Ψһ�������ȡֵ��'top'��'middle'�Լ�'bottom'��������ȡֵ����ͬΪ'top'��
�����У����Խ���������ڱ���ײ�������Ŀ��Ⱥͱ���Ԫ�ؿ�����ͬ�������ı�������롣
CAPTION { caption-side: bottom; width: auto; text-align: left }
���������չʾ��ν������������߾��С�ͨ���������ұ߾�Ϊ'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 }
�ٶ�����Ŀ���С�ڿ��ÿ��ȣ���ʽ���Ľ������������������
��ͬ�����ĵ�������Ԫ�أ������ڲ�Ԫ�ز����������������ݡ��߰ͱ߿�������û�б߾ࡣ
��Щ��Ŀ��Ӳ�����һ�����μ�����������դ��Ŀ��ơ�ÿ����ռ��һЩդ��Ԫ�����������¹���ȷ���ġ���Щ����������HTML 4.0�����İ汾��HTMLҲ��ʵ����������������չ�����ơ�
ע�⣺��Ԫ�������Ի���Զ�λ�����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Ҳ������ȥ����֮���û��˿���������Ⱦ֮����������ͼ��ʾ��������
Ϊ��ȷ��ÿ����Ԫ��ı�������ͬ�ı���Ԫ�ؿ��Ա�����Ϊ����һ��������εIJ����ϡ���һ���������õ�Ԫ�صı���ֻ�е�������IJ㶼��������ʱ�ſɼ���
��ײ���һ����һƽ�棬������������������п����ƣ������������ġ�
��һ��������顣���������ͬ�ߣ�����һ��ˮƽ������������
����֮���Ǵ����п�������������ƣ��������ͬ�ߣ�����һ��ˮƽ������������
��һ��������顣ÿ�����������ͬ��������һ�������Զ�������ȫ������������
�����ڶ�������С���Ҳ������������
��������Ԫ����ͼ��ʾ���������е��а���ͬ�������ĵ�Ԫ������ÿ����Ԫ�����ض������ݡ���Щ���ա��ĵ�Ԫ�������ģ������ø��ײ��������
�����У���һ�����ĸ���Ԫ�ڶ���û�е�Ԫ����˿��Կ���������������һ����Ԫ��ӵ�һ����չ�����С������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>
���ܱ���ʽ����������
CSS��δ������ν�ġ��Ż����ı��֣���Ϊ�ںܶ�����£�ʲô���Ż������Ǹ�Ʒζ���⡣CSSȷʵ������һЩԼ�����û����ڱ���ʱ�������ء��û��˿��������κ��������õ��㷨�����ҳ����ڡ��̶������㷨���£���������ѡ�������ٶȻ������Ⱦ��ȡ�
ֵ�� | auto | fixed | inherit |
��ʼֵ�� | auto |
�����ڣ� | 'table'��'inline-table'Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | N/A |
ý�飺 | �Ӿ� |
'table-layout'���Կ����˲��ֱ���Ԫ���С��е��㷨��ȡֵ�ĺ������£�
�������㷨�ֱ��������¡�
�������֣����٣��㷨�������ˮƽ���ֲ������ڵ�Ԫ������ݣ���ֻ�����ڱ���Ŀ��ȣ��еĿ����Լ��߿��Ԫ��ļ����
����Ŀ��ȿ�����ʽ����'width'����ָ�������ȡֵΪ'auto'������'display: table'��'display: inline-table'����ζ��ʹ���Զ������㷨��
�ڹ̶������㷨�У�ÿ���еĿ���������ȷ���ģ�
��ˣ�����Ŀ��Ƚ��DZ���Ԫ��'width'����ֵ���п������ϵ�Ԫ������߿͵Ľϴ�ֵ�����������п�������Ŀռ佫���䵽�������С�
����������£��û������յ�������һ�к�Ϳ��Կ�ʼ���֡������еĵ�Ԫ��Ӱ���п��������Ԫ�������������������'overflow'����ȷ���Ƿ���������ݡ�
�ڱ��㷨�У�һ��Ҫ�������ν�����������Ŀ������п����Լ�������߿������������㷨�����˱��淶д��ʱ���ɳ���HTML�û��˵���Ϊ�����'table-layout'Ϊ'auto'��UA������Ҫ��ʵʩ���㷨��ȷ�����֣����ǿ���ʹ���κ������㷨��
���㷨���ܲ���ô��Ч����Ϊ��Ҫ���û�����ȷ�����ղ���ǰ������еı������ݣ�������Ҫ�����һ�εĽ�����
�п���������ȷ���ģ�
���⣬����ÿ����Ԫ��ġ����Ԫ����ȣ���������ʽ�ķ��У������ݲ����еĽ��и�ʽ����
��������ÿ���о͵õ���������С���ȡ��п�������Ӱ�����ձ���Ŀ��ȵģ�
�п�����ǰٷֱȣ�������ڱ�����ȡ��������������'width: auto'����ô�ٷֱȱ�ʾ���п���Լ����UAӦ�ó��������Լ����������Ȼ���Ⲣ���ǿ��ܵģ�����п���'110%'����ô��Լ����������ġ���
ע�⣺�ڸ��㷨�У��У������飩���У������飩��Լ����Ҳ��Լ�������ǰ����ĵ�Ԫ��ijߴ硣�����п����ܼ��Ӱ�����иߣ���֮��Ȼ��
����ĸ߶���'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'��ȡֵ�������£�
��Ԫ��Ļ����ǵ�Ԫ���е�һ���߿��Ļ��ߡ����û���ı�����ô���߾��Ǹõ�Ԫ������ʾ������ʲô����Ļ��ߣ����û���κζ�����ô��ȡ��Ԫ���ĵ��ߡ�����������'vertical-align: baseline'�ĵ�Ԫ���У���Ԫ������ߵ������뽫���������еĻ��ߡ��뿴������
��Ԫ���1��2���ڻ��߶��롣��Ԫ���2�ڻ����ϵĸ߶���ߣ���˾;����˸��еĻ��ߡ�ע�⣬���û�е�Ԫ�����ڻ��߶��룬��ô���о�û�У�Ҳ����Ҫ�����ߡ�
Ϊ�˱������壬��Ԫ��Ķ��밴������˳����У�
�����Ԫ���ĸ߶�С���иߣ���ô������ö���Ķ���ױ߰ס�
��Ԫ�����ݵ�ˮƽ������'text-align'����ָ����
���һ�������ɸ���Ԫ���'text-align'��������Ϊһ��<string>ֵ����Щ��Ԫ������һ����ֱ���ߡ��ַ����Ŀ�ʼ��Ӵ����ᡣ�ַ�����ȷ�����ַ������������������ұߡ�
���������ı�ֻ�����ı�������һ������ʾʱ����Ӿ�������Ԫ�������ж��У���ô�����δ������ġ�
���һ����Ԫ���'text-align'ȡֵΪһ���ַ��������Ǹ��ַ������ʳ����ڵ�Ԫ�������У���ô��Ԫ�����ݵĽ�β�Ӵ�����Ĵ�ֱ�ᡣ
��Щ�ַ�����һ��ÿ����Ԫ����ͬ������ͨ������˵ġ�
CSS��δ�ṩһ�ַ�����ָ����ֱ������������п�ߵ�ƫ�ơ�
���µ���ʽ����
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
�С����顢�С������'visibility'���Կ���ȡֵΪ'collapse'����ʹ�������л��б��Ƴ���ʾ������Щ����ͨ��Ҫռ�õ�λ��Ϊ�����������á����ǣ����еĽ�ֹ��ʾ����Ӱ�����IJ��֡����ǵ���Լ�����ܵĸı䣬���������̬���Ƴ��������е�Ч��������ǿ�����±��֡�
CSS����������ȫ��ͬ�ķ������õ�Ԫ��ı߿�һ�����ʺ����ڶ����ĵ�Ԫ����������ν������߿���һ���ʺ����ôӱ���һ�˵���һ�˵������߿ܶ�߿���ʽ�����������ж�����ʵ�֣��������ĸ��������Ǹ�ƫ�����⡣
ֵ�� | collapse | separate | inherit |
��ʼֵ�� | collapse |
�����ڣ� | 'table'��'inline-table'Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | N/A |
ý�飺 | �Ӿ� |
������ѡ���˱���߿�ģ�͡�ȡֵΪ'separate'��ѡ�����߿�ģ�͡�ȡֵ'collapse'ѡ���غϵı߿�ģ�͡��ֱ��������¡�
ֵ�� | <length> <length>? | inherit |
��ʼֵ�� | 0 |
�����ڣ� | 'table'��'inline-table'Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | N/A |
ý�飺 | �Ӿ� |
����ָ���˷ָ����ڵ�Ԫ��߿�ľ��롣���ָ��һ�����ȣ���ָ����ˮƽ�ʹ�ֱ�ļ�ࡣ��������������ȣ���һ��ָ��ˮƽ��࣬���ڶ���ָ����ֱ��ࡣ���Ȳ������Ǹ�����
����ģ���У�ÿ����Ԫ����һ�������ı߿�'border-spacing'����ָ�������ڵ�Ԫ��߿��ľ��롣�ÿռ��ɱ���Ԫ�صı�����䡣�С��С���������鲻�����б߿�Ҳ����˵���û��˱���������ЩԪ�صı߿����ԣ���
��ͼ�еı�����������������ʽ���Ľ����
TABLE { border: outset 10pt; border-collapse: separate; border-spacing: 15pt } TD { border: inset 5pt } TD.special { border: inset 10pt } /* The top-left cell */
ֵ�� | show | hide | inherit |
��ʼֵ�� | show |
�����ڣ� | 'table-cell' elements |
�ɷ�̳У� | �� |
�ٷֱȣ� | N/A |
ý�飺 | �Ӿ� |
�ڷ���߿�ģ���У������Կ�����û�п������ݵĵ�Ԫ����Χ�߿����Ⱦ���յ�Ԫ���Լ�'visibility'����Ϊ'hidden'�ĵ�Ԫ����Ϊ��û�п������ݡ��������ݰ���" "�Լ������հף�����ASCII CR��"\0D"����LF��"\0A"��, tab��"\09"���Ϳո�"\20"����
���������ȡֵΪ'show'���հ�Ԫ����Χ�ử���߿�һ��ĵ�Ԫ��һ������
ȡֵΪ'hide'��ζ���ڿյ�Ԫ����Χ�����߿���һ��˵�����һ�������е�Ԫ�������ȡֵ��Ϊ'hide'���Ҷ�û���κο������ݣ���ô���о���ͬ������'display: none'һ����
����Ĺ���ʹ���еĵ�Ԫ����Χ��Ҫ�����߿�
TABLE { empty-cells: show }
���غϵı߿�ģ���У��п���ָ��һ���߿���Χ�Ƶ�Ԫ���С����顢�С������ȫ���֡�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��ı߿�ע�⣬��������ı߿�ֻ��һ����������ȡ�����һ�����ڱ߾������С�
ע�⣬�ڸ�ģ���У�����Ŀ��Ȱ�������߿��һ�롣ͬʱ����ģ���У�����û�б߰ף������б߾ࣩ��
���غϱ߿�ģ���У�ÿ����Ԫ��ÿ�����ϵı߿���ܱ����������������ĸ���Ԫ�أ���Ԫ���У����飬�У������Լ����������ı߿�����ָ��������Щ�߿�Ŀ��ȡ���ʽ����ɫ�����ܲ���ͬ������ǣ���ÿ�����ϣ�����������ı߿���ʽ��ѡ�У����dz������κ�һ��'hidden'��ʽ�Ӷ��������Ľ��߿�ر��ˡ�
����Ĺ���˵�����г�ͻ������£���ѡ���ĸ��߿���ʽ��
�����������ʾ�����������Ӧ�á���ʽ�����£�
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>
���ܲ������µ�Ч����
�������������ʾ��һ���������м��зָ��ߡ�����Ķ��߿�����Ϊ'hidden'�������˵�һ�еĶ��߿����ʵ����HTML 4.0�е�"rules"���ԣ�rules="rows"����
TABLE[rules=rows] TR { border-top: solid } TABLE[rules=rows] { border-collapse: collapse; border-top: hidden }
�����У�������TABLE��'hidden'�߿�Ҳ���Դﵽͬ����Ч����ֻҪ�Ե�һ�ж������ü��ɡ�ϲ�����ĸ�����������ϲ�����⡣
TR:first-child { border-top: none } TR { border-top: solid }
��������һ������չʾ�����غϵı߿�
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>
ijЩ'border-style'��ȡֵ�ڱ����еĺ����������Ԫ���еĺ��岻ͬ���±������Ǻű�����
�������ͨ��һ������������˵�������ݵ�Ԫ���ͷ��Ԫ��֮��Ĺ�ϵ�����Բ�ͬ��ˮƽ�ʹ�ֱ����ķ�ʽ˵������Щ������������������û��Զ�ά�ķ�ʽ�ڱ������ƶ�������������Ƕ�Ӧ�Կռ��ʾ�Ĺ�ϵ�Ŀ��ܡ�������ǿ��ܵģ���ʽ������ָ��ͷҪ���ĸ�����˵����
ֵ�� | once | always | inherit |
��ʼֵ�� | once |
�����ڣ� | �б���ͷԪ����Ϣ��Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | N/A |
ý�飺 | ��Ƶ |
������ָ������ͷ�Ƿ���ÿ����Ԫ��ǰ˵������ֻ����ij����Ԫ�������ͷ��ǰһ����ͬʱ˵����ȡֵ�ĺ������£�
ÿ���ĵ����Կ����в�ͬ�Ļ�����������ָ��ͷ�����磬��HTML 4.0��[HTML40]���У����������ֲ�ͬ��������ָ��ͷ��Ϣ��"headers"��"scope"�Լ�"axis"���������Щ����û�б�ָ�������淶�ṩ��һ���㷨��ȷ��ͷ��Ϣ��
���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 ...