CSS Tables & Cursors

Ratings:
(4)
Views:459
Banner-Img
  • Share this blog:

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
Auto Shape 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.
Crosshair A cross hair or plus sign
Default An arrow
Pointer A pointing hand(in IE 4 this value is hand)
Move The I bar
e-resize The cursor indicate that an edge of a box is to be moved right(east)
ne-resize The cursor indicate that an edge of a box is to be moved up and right(north/east)
nw –resize The cursor indicate that an edge of a box is to be moved up and left(north/west)
n-resize The cursor indicate that an edge of a box is to be moved up(north)
se-resize The cursor indicate that an edge of a box is to be moved up and right(south/east)
sw-resize The cursor indicate that an edge of a box is to be moved up andleft (south/west)
s-resize The cursor indicate that an edge of a box is to be moved down(south)
w-resize The cursor indicate that an edge of a box is to be moved left(west)
Text The I bar
Wait An hour glass
Help A 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
visible Allows the content to overflow the border of its containing element.
hidden The content of the nested element is simply cut off at the border of the containing element and no scroll bars is visible.
scroll The size of the containing element does not change, but the scroll bars are added to allow the user to scroll to see the content.
auto The 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>

You liked the article?

Like : 0

Vote for difficulty

Current difficulty (Avg): Medium

Recommended Courses

1/15

About Author
Authorlogo
Name
TekSlate
Author Bio

TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.


Stay Updated


Get stories of change makers and innovators from the startup ecosystem in your inbox