• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

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:

 

value                       Description
AutoShape of the cursor depends on the context area it is over .For example an I over text ,a hand over a link ,a nd so on.
CrosshairA cross hair or plus sign
DefaultAn arrow
PointerA pointing hand(in IE 4 this value is hand)
MoveThe I bar
e-resizeThe cursor indicate that an edge of a box is to be moved right(east)
ne-resizeThe cursor indicate that an edge of a box is to be moved up and right(north/east)
nw –resizeThe cursor indicate that an edge of a box is to be moved up and left(north/west)
n-resizeThe cursor indicate that an edge of a box is to be moved up(north)
se-resizeThe cursor indicate that an edge of a box is to be moved up and right(south/east)
sw-resizeThe cursor indicate that an edge of a box is to be moved up andleft (south/west)
s-resizeThe cursor indicate that an edge of a box is to be moved down(south)
w-resizeThe cursor indicate that an edge of a box is to be moved left(west)
TextThe I bar
WaitAn hour glass
HelpA question mark or balloon, ideal for use over help buttons
<url>The source of a cursor image file

 

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:

Value                 Description
visibleAllows the content to overflow the border of its containing element.
hiddenThe content of the nested element is simply cut off at the border of the containing element and no scroll bars is visible.
scrollThe size of the containing element does not change, but the scroll bars are added to allow the user to scroll to see the content.
autoThe purpose is the same as scroll, but the scrollbar will be shown only if the content does overflow.

 

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>

Summary
Review Date
Reviewed Item
CSS Tables & Cursors
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on CSS Tables & Cursors"

    Leave a Message

    Your email address will not be published. Required fields are marked *

    Site Disclaimer, Copyright © 2016 - All Rights Reserved.

    Support


    Please leave a message and we'll get back to you soon.

    I agree to be contacted via e-mail.