Learning HTML - Day 5
Today is 29th January 2021 and it is my fourth day to learn HTML 🙋
- The HTML
classattribute specifies one or more class names for an element - Classes are used by CSS and JavaScript to select and access specific elements
- The
classattribute can be used on any HTML element - The class name is case sensitive
- Different HTML elements can point to the same class name
- JavaScript can access elements with a specific class name with the
getElementsByClassName()method
Notice that the table in the examples above have double borders. This is because both the table and the <th> and <td> elements have separate borders.
To remove double borders use border-collapse:collapse
Code -
<html>
<head>
<title>My web page</title>
<style>
table, th, td{
border:2px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table class="table">
<caption>Example</caption>
<tr>
<th>Name</th>
<th>Country</th>
<th>Profession</th>
</tr>
<tr>
<td>Sachin Tendulkar</td>
<td>India</td>
<td>Cricket</td>
</tr>
<tr>
<td>Roger Federer</td>
<td>Switzerland</td>
<td>Lawn Tennis</td>
</tr>
<tr>
<td>Lionel Messi</td>
<td>Argentina</td>
<td>Football</td>
</tr>
<tr>
<td>Sania Nehwal</td>
<td>India</td>
<td>Badminton</td>
</tr>
</body>
</html>
Stands for "Cascading Style Sheet." Cascading style sheets are used to format the layout of Web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML.
Border for only table -
Output -
<html>
<head>
<title>My web page</title>
<style>
table{
border:2px solid red;
border-collapse: collapse;}
</style>
</head>
<body>
<table class="table">
<caption>Example</caption>
<tr>
<th>Name</th>
<th>Country</th>
<th>Profession</th>
</tr>
<tr>
<td>Sachin Tendulkar</td>
<td>India</td>
<td>Cricket</td>
</tr>
</body>
</html>
Changing background color of table and text color -
Code -
<html>
<head>
<title>My web page</title>
<style>
table{
border:2px solid red;
border-collapse: collapse;
background-color: black;
color:yellow;}
</style>
</head>
<body>
<table class="table">
<caption>Example</caption>
<tr>
<th>Name</th>
<th>Country</th>
<th>Profession</th>
</tr>
<tr>
<td>Sachin Tendulkar</td>
<td>India</td>
<td>Cricket</td>
</tr>
</body>
</html>
<header>- Defines a header for a document or a section<nav>- Defines a set of navigation links<section>- Defines a section in a document<article>- Defines an independent, self-contained content<aside>- Defines content aside from the content (like a sidebar)<footer>- Defines a footer for a document or a section<details>- Defines additional details that the user can open and close on demand<summary>- Defines a heading for the<details>element
Comments
Post a Comment