CSS Tables & Cursors

CSS Tables

Table Borders

To specify table borders in CSS, use the border property. The example below specifies a black border for table ,th, and td elements.   Example table th, td { border: 1px solid black; } Notice that the table in the example above has double borders.This is because both the table and the th/td elements have separate borders. To display a single border for the table ,use the border-collapse  property.  

Collapse Borders

The border-collapse property sets whether the table borders are collapsed into a single border or separated.   Example table { border-collapse:collapse; } table, th, td { border: 1px solid black; }  

Table Width and Height

Width and Height of a table is defined by  the width and height properties. The example below sets the width of the table to 100% and the height of the th elements to 50 px:   Example table { width:100% } th { height: 50px; }  

Table Text Alignment

The text in a table is aligned with the text-align and vertical –align properties. The text-align property sets the horizontal alignment, like left, right, or center:   Example td{ text-align:right; } The vertical –align property sets the vertical alignment, like top, bottom, or middle.   Example td{ height:50px; vertical –align : bottom; }  

Table Padding

To control the space between the border and content in table,use the padding  property on td and th elements:   Example td { padding:15px; }  

Table Color

The example below specifies the color of the borders, and the text and background color of th elements:   Example table ,td,th { border:1px solid green; } th { background –color:green; }   Example <style type=”text/css”> tr:nth-child(odd) { background –color:red;} tr:nth-child(even) { background –color:green;} table, tr, td,th{ border:1px solid black; border-collapse:collapse; } </style>   Example <style type=”text/css”> #customers{ border-collapse:collapse; font-family :”Trebuchet MS”, Arial, Helvetice,sans-serif; width :100%; } # customers td,# customers th{ border :1px solid#98BF21; font-size:1.2 em; padding:3 px 7px 2px; } # customers th{ background-color:#A7C942; color:#FFFFFF; font-size:1.4em; padding-bottom: 4px; padding-top:5px; text-align:left; } # customers tr.alt td{ background –color:#EAF2D3; color: #000000; </style>  

CSS-Cursors

The cursor  property of CSS allows you to specify the type of cursor that should be displayed to the user. One good usage of this property is in using images for submit buttons on forms. By default, when a cursor hovers over a link, the cursor changed from a pointer to a hand. For a submit button on a form this does not happen. Therefore ,using the cursor property to change the cursor to hand whenever someone hovers over an image that is a submit button .This provides  a visual clue that they can click  it. The table that follows shows possible values for the cursor property:  

Note

you should try to use only these values to add helpful information for users ,and in places they would except to see that cursor. For example ,using the crosshair when someone  hovers over a link confuse visitors.  

Here is the example

<p> Move the mouse over the words to see the cursor change: </p> <div style=”cursor: auto”>Auto</div> <div style=”cursor: crosshair”>Crosshair</div> <div style=”cursor: default”>Default</div> <div style=”cursor: pointer”>Pointer</div> <div style=”cursor: move”>Move</div> <div style=”cursor: e-resize”>e-resize</div> <div style=”cursor: ne-resize”>ne-resize </div> <div style=”cursor: nw-resize”>nw-resize </div> <div style=”cursor: n-resize”>n-resize </div> <div style=”cursor: se-resize”>se-resize </div> <div style=”cursor: sw-resize”>sw-resize </div> <div style=”cursor: s-resize”>s-resize </div> <div style=”cursor: w-resize”>w-resize </div> <div style=”cursor: text”>text </div> <div style=”cursor: wait”>wait </div> <div style=”cursor: help”>help </div>  

CSS –Scroll bars

There may be a case when an elements content might be larger than the amount of space allocated to it .For example given width and height properties did not allow enough room to accommodate the content of the element. CSS provide a property called overflow which tells the browser what to do if the box’s content is larger than the box itself. This property can take one of the following values:

Here is the example

<style type=”text/css”> .scroll { display: block; Border:1px solid red; Padding:5px; Margin-top:5px; Width:300px; Height:50px; Overflow:scroll; } Auto{ Display:block; Border:1px solid red; Padding:5px; Margin-top:5px; Width:300px; Height:50px; Overflow:auto; } </style> <p> Example of scroll value:</p> <div class=”scroll”> I am going to keep lot of content here just to show you how scrollbars works if there just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars. </div> <br/> <p>Example of auto value:</p> <div class=”auto”> I am going to keep lot of content here just to show you how scrollbars works if there just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars. </div>