Wednesday, November 23, 2022

CSS Menu Design

Css menu design

Webpage menus play necessary part on the web. When designing menus, usability is the key. In this section we are going to show you how to create a simple, usable and functional horizontal menu with HTML and CSS step by step. We assume that you have a basic knowledge of HTML and CSS.

A navigation bar needs standard HTML as a base. In our examples we will build the navigation bar from a standard HTML list. A navigation bar is basically a list of links, so using the <ul> and <li> elements make perfect sense.

Create Navigation menu items. Example

<!DOCTYPE html>

<html>

<body>

<ul>

<li><a href="#About">About us</li>

<li><a href="#courses">Courses</li>

<li><a href ="#contacts">Contacts</li>

<li><a href="#downloads">Downloads</li>

</ul>

</body>

</html>

Create Navigation menu output

Create Navigation menu (margins, padding)

2. Example

<!DOCTYPE html>

<html>

<head>

<style>

ul{

list-style-type: none;

margin: 0px;

padding: 0px;

</style>

</head>

<body>

<h1>college of Computer science</h1>

<ul>

<li><a href="#About">About us</li>

<li><a href="#courses">Courses</li>

<li><a href="#contact">Contact</li>

<li><a href="#downloads">Downloads</li>

</ul>

</body>

</html>

Create Navigation menu output

Vertical Navigation Bar

A vertical navigation bar is a collection of links on each page's left or right side. Merits of Vertical Navigation. A more considerable number of top-level linkages is possible.

All the content is visible Vertical menus allow you to list all of your website's pages along the side of the page, while in a horizontal menu many of the website's pages are hidden from view in drop down menus. This makes vertical menus easier for website navigation and a great option for long, single-page websites.

Vertical Nevigation Bar Example

<!DOCTYPE html>

<html>

<head>

<style>

ul{

lilist-style-type: none;

margin: 0px;

padding:0px;

}

li a{

display:block;

background-color: #f09d28;

text-align: left;

text-decoration:none;

width:100px;

padding: 8px 10px;

color:yellow; }

</style>

</head>

<body>

<h1>College of Computer science</h1>

<ul>

<li><a href="#About">About us</li>

<li><a href="#courses">Courses</li>

<li><a href="#downloads">Downloads</li>

<li><a href="#Contact">Content</li>

</ul></body> </html>

Vertical Nevigation Bar output

Create a basic vertical Nevigation Bar with a background color and Change the background color of the when links when the user moves the mouse over them.

For Example

<!DOCTYPE html>

<html>

<head>

<style>

ul(list-style-type: none;

margin: 0px;

padding: 0px;

}

li a{

display:block;

background-color:#f09d28;

text-align:left;

text-decoration:none;

width:100px;

padding: 8px 10px;

color: yellow;

}

li a:hover

{

background-color:red;

opacity:0.8;

color:white; }

</style>

</head>

<body

<h1>College of Computer science</h1>

<h3> change the link color on hover </h3>

<ul>

<li><a href="#About">About us</li>

<li><a href="#courses">Courses</li>

<li><a href="#downloads">Downloads</li>

</ul> </body>

</html>

Output

Refer LINK

css border cell

html program

responsive image grid html

file upload html

Tuesday, November 22, 2022

html Table Border

Border Cells

Border on empty cells

In any table, A cell that does not contain any content is known as an empty cell. If you have empty cells in your table, then you can use the empty-cells property to specify whether or not their borders should be shown. Since browsers treat empty cells in different ways, if you want to explicitly show or hide borders on any empty cells then you should use this property.

Type 3

1. Show: This shows the border of any empty cells.

2. hide: This hides the border of any empty cells

3. Inherit : if you have one table nested inside another

Border on empty cells Example

<html>

<head>

<style>

td { border: 1px solid #0088dd;

padding:15px;}

table.one { empty-cells: show; }

table.two { empty-cells: hide; }

</style>

</head>

<body>

<h2> empty-cells: show property</h2> <table class="one">

</table> <br> <h2> empty-cells:hide property</h2>

</html>

Border on empty cells output

Border-spacing & border-collapse

The border spacing property allows you to control the distance between adjacent cells. By defaul browsers often leave a small gap between each table cell, so if you want to increase or decrease this space then the border spacing property allows you to control the gap. The value of this property is usually specifted in pixels. You can specify two values if desired to specify separate numbers for horontal and vertical spacing.

Border-spacing property:

a)length:- It specifies the horizontal and vertical spacing between borders. If two length values are provided to this property, the first value sets the horizontal spacing and the second value sets the vertical spacing.

b)inherit:-It specifies that the value of the border-spacing property should be inherited from the parent element.

syntax

border-spacing: 15px 50px;

In the above syntax, the border-spacing property takes two values, 15pixles and 50pixles. The first value specifies the horizontal spacing and the second value specifies the vertical spacing.

When a border has been used on table cells, where two cells meet, the width of lines would be twice that of the outside edges. It is possible to collapse adjacent borders to prevent this using the border- collapse property.

Possible values

Collapse: We use border-collapse property to create a collapsed border in HTML. The border-collapse is a CSS property used to set the table borders should collapse into a single border or be separated with its own border in HTML. it sets a common border to all the cells of a table.

Separate: The border-spacing CSS property sets the distance between the borders of adjacent cells in a <table> . This property applies only when border-collapse is separate. It sets the separate border for each cell of a table.

Inherit: it inherits the value of the border-collapse property from the parent element.

The inherit CSS keyword causes the element to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand property.

Syntax:

table {border-collapse: separate;

}

Border-spacing & border-collapse Example

<style>

td {

background-color: pink;

padding: 15px; border: 2px solid #000000;

}

table.one { border-spacing: 5px 5px; } table.two { border-collapse: collapse; }

</Style>

</head>

<body>

<h2> border-spacing: 5px 5px;</h2>

</table>

<h2> border-collapse: collapse: </h2>

</table>

</body>

</html>

Border-spacing & border-collapse output

Table Layout property

The table layout property is used to specify how a table should appear in a web browser. In CSS, the table-layout property allows flexibility in positioning the tables, which means that you can easily move and place tables at different locations throughout the Web page. Using the table-layout property also decreases the loading time of the table, allowing the main content to appear before the graphics.

Auto: It refers to the layout in which a web browser automatically resizes a table according to its content. This is the default value of the table layout property.

Fixed: It refers to the layout in which a web browser reads only the first row of a table to determine the final layout of the table. It depends on the table width the width of the columns and border or cell spacing.

Syntax

Table {table-layout: auto;}

Table Layout property Example

<!Doctype html>

<Style>

table { border-collapse: collapse;

border:1px solid black;}

th, td {border-:1px solid black;}

table.a {table- layout: auto; width:180px;}

</Style></head><body>

<h3>The table-layout & caption side Property</h3>

<caption> Student Details</caption> <tr><th>Student ID</th>

<th>Student Name</th>

<th>Course</th></tr>

<td>Sumit</td>

</Body></html>

Table Layout property output

View LINK

css table property

css border bottom property

thought

horizontal navigation bar

Monday, November 21, 2022

CSS Table property Web designing

CSS Table property

HTML table allow web development to arrange data into rows and columns. Styling a table with css can greatly improve it appearance.

CSS table (basic tag information)

1.Width: To set the width of the table

2. Padding: To set the space between the border of each table cell and it's content.

3. Text-transform: To convert the content of the table headers to uppercase.

4. letter-spacing, font-size: add additional styling to the contents of the table headers.

5. border-top, border-bottom: set borders above and below the table headers.

6. text-align: align the writing to the left of some table cells and to the right of the others.

7. background-color: change the background color of the alternative table rows.

8. Hover: highlight a table row when a user mouse goes over it.

CSS styling Table Tag

1.Give cells padding: if text in a table cell either touches a border ( or another cell) it becomes much harder to read. Adding padding helps to improve readability.

2. Distinguish heading: putting all table headings in bold makes them easier to read.you can also make headings uppercase and then either add a background color or an underline to clearly distinguish them from content.

3. Shade alternate rows: shading every other row can help users follow along the lines. use a subtle distinction from the normal color of the rows to keep the table looking clean.

4. Align numerals: You can use the text align property to align the content of any column that contains number to the right,so that large number are clearly distinguished from smaller ones.

Table Example

<!DOCKTYPE html>

<html>

<head>

<style>

body { font-family: Arial, Verdana, sans-serif; color: #111333;

}

table {

width: 600px; }

th, td {

padding: 7px 10px 10px 10px;}

th {

text-transform: uppercase; letter-spacing: 0.1em; font-size: 90%; border-bottom: 2px solid #111111; border-top: 1px solid #999; text-align: left;

}

tr.even {background-color: #cccccc;}

tr.hover { background-color: #c3e6e5;}

marks {text-align: right;}

</style>

</head>

<body>

<h1>Topers of the Class in Subject wise</h1>

<table>

<th>Subject</th>

<th class="marks">Marks</th>

<th class="marks">Position</th>

</tr>

<tr>

<td>Neeraj</td>

<td>Mathematics</td>

<td class="marks">First</td>

</tr>

<td>poonam</td>

<td>Natural Science</td>

<td class="marks">First</td>

</tr>

<tr>

<td>History</td>

<td class="marks">First</td>

</tr>

<td>Physics</td>

<td class="marks">First</td>

</tr>

</body></html>

Table output

2. Table border

When you. build an HTML table without any border styles or attributes, browser display them without any border.To specify table border in css you can set the table border, head border, table description border etc.

Table background color: In css background color property is used to change the color of the table.The description border.

Table background color Example

<!DOCTYPE html>

<html>

<head>

<style>

table, tr, th, td{

border: 3px solid blue;

border-left-color:red;

border-right-color:green;

border-right-style: dashed: 10 border-bottom-style:dotted; }

table { 12 width:40%;

text-align:left;

background-color:yellow; }

</style>

</head> <body>

<h1>Example of Table border with color</h1> <table>

<tr><th>FirstName</th><th>LastName</th>

<th>Saving</th></tr>

<tr><td>Amit</td><td>Tiwari</td><td>5000</td></tr>

<tr><td>Parichary</td><td>Tiwari</td><td>10000</td></tr>

<tr><td>Ashish</td><td>Shukla</td><td>15000</td></tr>

</table> </body>

</html>

Table background color output

3.Table Border-Radius-property

It is used to make the corners of the table borders as rounded.

Table Border-Radius- property Example

<!DOCTYPE html>

<style>

table, tr, th, td{

border: 3px solid blue;

border-left-color:red;

border-right-color:green;

border-right-style:dashed;

border-bottom-style:dotted;

border-radius:50px; /* For change the table border*/ padding: 16px;

background-color:yellow;

width:40%; text-align:center;

</style>

</head> <body>

<h1>Example of Table border with color</h1>

<table>

<tr><th>FirstName</th><th>LastName</th><th>Saving</th></tr>

<tr><td>Amit</td><td>chavan</td><td>5000</td></tr>

<tr><td>Pratiksha</td><td>Tivari</td><td>10000</td></tr>

<tr><td>aradhy</td><td>mohite</td><td>15000</td></tr>

</table>

</body> </html>

Table Border-Radius property output

Visit Link