HOME
          About US
          Contact Us

CSS Tables

Chapter - 22 : CSS Tables


i) Table Borders: Refer to the details explained earlier in the border chapter. All those properties like style, color and thickness are applicable in table border also.

Table Border Styles : dotted, dashed, solid, double, Groove, ridge, inset, outset

b) Table Border Width: The width can also be defined in terms of px or in terms of thin / medium / thick.

c) Table Border Color: This can be defined in terms of Hex Code of Name

table, th, td { border: 2px solid red;}
In this case both the 'th' and 'td' element will have a border and two borders will be visible. To avoid this it is recommended to use the collapse property'.

table {border-collapse:collapse;}
table,th, td {border: 2px solid red;}

Note: The value should be written in the sequence of :- thickness - style - color

ii) Table Width and Height: In this the width of complete table is defined and not the width of cells. On the other hand the height of cells is defined. The cell width is automatically calculated by the browser, depending upon the no of cells and width of content.

table {width:100%;}
th {height:40px;}
In this the table will take the complete width of that division and height of cell will be 40 px.

iii) Table Text Alignment: The text can be horizontally aligned in left, right, or center and vertically aligned in top, bottom, or middle:

td {height:40px; text-align:center; vertical-align:top;}
If alignment is not defined it will be taken as 'left' in horizontal and 'top' in vertical

iv) Table Padding: The padding can be used for table and cells both. However it is also optional.
table,th, td {padding: 2px;}

v)Table Color: This defines the background color and color of text of th elements.
th {background-color:white; color:blue;}

CSS Tables © funandhobby.com (CSS Tables)