Table Tables are defined with the tag. A table is divided into rows with the tag. (tr stands for table row) A row is divided into data cells with the tag. (td stands for table data) A row can also be divided into headings with the tag. (th stands for table heading) The elements are the data containers in the table. The elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.

Table Character Name Anime Name Himura Kenshin Rurouni Kenshin Before : border="2px"cellpadding="4px" table { width:750px; } Then add table,th,td {border:1px solid black;} Then add border-collapse:collapse; Then add th,td {padding:5px;}

Table Continued 1)tr:first-of-type {background-color: maroon;color:white;} 2)tr:nth-of-type(2n) { background-color: #9CF; } 3)tr:nth-of-type( 2n+3 ) { background-color: darksalmon; } If you want to color a specific cell, give an ID to the cell and define the background color or font color to that id! In HTML: In CSS: </td></td> #t1 { background-color:#CF0;}

Table Tags

Round Border Corners 1) 2) 3) Type something in your html file Put that within div.roundborder …..... { border: size style color; border-radius: radius; -moz-border-radius: radius; -webkit-border-radius: radius; 1px solid #F00; in Opera and Internet in Firefox in Chrome and Safari Explorer 9 } 4)border: dashed thick #0000FF;

hin <dihin <di Add a Shadow Effect 1) Type something in your html file 2) Put that wit div.shadow v class="shadow">…..... { box-shadow: xpos ypos blur -moz-box-shadow: …....; -webkit-box-shadow: …...; spread color;5px 5px 10px 5px #339933; in Firefox in Chrome and Safari } Where, xpos and ypos are relativecoordinates to indicate where the shadow should be placed. Positive integers indicate that the shadow is placed to the right of, and below, the shadowed element. blur represents the size to which a blur effect will be added. For example, a setting of 10px indicates that the shadow is blurred from color to transparency for 10 pixels, straddling the shadow’s perimeter. spread allows for a general increase of the shadow’s height and width.

Add a Shadow Effect Conti... 1) In …....., add xpos ypos blur spread color to create additional shadow effects. div.shadowdiv.shadow { box-shadow: xpos ypos blur spread -moz-box-shadow: …...., …...; -webkit-box-shadow: …..., …...; color, xpos ypos blur spread in Firefox in Chrome and Safari color;color; } Example: box-shadow: -5px 5px 10px 5px #339933, 5px -5px 10px 5px #FF9966;

Scroll Bar 1) Type something long in your html file 2) Put that within … )div.scrollbar { width:750px; height:350px; overflow:auto; margin-top:40px; margin-left:10px; background-color: #FF9;#FF9; }

3 Tier Architecture