CSS Table and Form Styling -#Nembar


CSS Table and Form Styling:

Today we will discuss CSS Table and Form Styling.

Table Border:

We can specify table border in CSS using border property.Below example shows red border for table, th and td element.The border collapse property set whether the table borders should be collapsed into a single border.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
table {
    border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>#Nembar</td>
    <td>Khan</td>
  </tr>
  <tr>
    <td>Aizaz</td>
    <td>Ali</td>
  </tr>
</table>
</body>
</html>

Table Width and Height:

We can set width and height for table using width and height properties.Below example shows how to set width and height for table.

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
    border: 1px solid black;
}
table {
    border-collapse: collapse;
    width: 100%;
}
th {
    height: 50px;
}
</style>
</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Aizaz</td>
    <td>Ali</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Yasir</td>
    <td>Khan</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Fayaz</td>
    <td>Khan</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Salman</td>
    <td>Khan</td>
    <td>$250</td>
</tr>
</table>
</body>
</html>

Table Color:

Below example show how to make color table in CSS.

<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    text-align: left;
    padding: 8px;
    background-color: skyblue;
}
th {
    background-color: #4CAF50;
    color: white;
}
</style>
</head>
<body>
<h2>Colored Table Header</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Aizaz</td>
    <td>Ali</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Yasir</td>
    <td>Khan</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Fayaz</td>
    <td>Khan</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Salman</td>
    <td>Khan</td>
    <td>$250</td>
</tr>
</table>
</body>
</html>

CSS Form Styling Input Fields:

Use width property to set width of the input field.

input {
    width: 100%;
}

The above example applies to all input fields.If you only want to style a specific input type, you can use attribute selectors.

  • input[type=’text’] – it will select only input type text
  • input[type=’password’] – it will select only input type password
  • input[type=’submit’] – it will select only input type submit

Let’s see how to stylize Form in CSS.

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    border: 3px solid #ccc;
}
input[type=text]:focus {
    border: 3px solid #555;
}
textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
}
input[type=submit]{
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
</head>
<body>
<p>CSS Form:</p>
<form>
  <label>First Name</label>
  <input type="text" value="aizaz">
  <label for="fname">Last Name</label>
  <input type="text" value="ali">
  <textarea>Some text...</textarea>
  <input type="submit" value="Submit">
</form>
</body>
</html>

Previous Lecture Next Lecture

Insurance , Loans, Mortgage, Attorney, Credit, Lawyer,Donate , Degree, Hosting,Claim, mesothelioma attorney maryland




Be the first to comment

Leave a Reply

Your email address will not be published.


*