Skip to main content

AngularJS - Tables

Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily.  Following example states the use of ng-repeat directive to draw a table. <table> <tr> <th> Name </th> <th> Marks </th> </tr> <tr ng-repeat = "subject in student.subjects" > <td> {{ subject.name }} </td> <td> {{ subject.marks }} </td> </tr> </table> Table can be styled using CSS Styling. <style> table , th , td { border : 1px solid grey ; border - collapse : collapse ; padding : 5px ; } table tr : nth - child ( odd ) { background - color : #f2f2f2; } table tr : nth - child ( even ) { background - color : #ffffff; } </style> Example Following example will showcase all the above mentioned directive. <html> <head> <
Post a Comment

HTML5 Video Gallery and Video Enlargement with ECMAScript

<!DOCTYPE HTML>
<html>
<head><title>Sample</title>
</head>
<body>
    <h1>Title of Gallery</h1>
    <article>

        <figure style="display:inline-block"><video src="small.ogv" width=200px controls autoplay></video><br><figcaption>Caption 1</figcaption></figure>
        <figure style="display:inline-block"><video src="small.webm" width=200px controls autoplay></video><br><figcaption>Caption 2</figcaption></figure>
            <br>
        <figure style="display:inline-block"><video src="small.ogv" width=200px controls autoplay></video><br><figcaption>Caption 3</figcaption></figure>
        <figure style="display:inline-block"><video src="small.webm" width=200px controls autoplay></video><br><figcaption>Caption 4</figcaption></figure>

    </article>
</body>
</html>

Comments

Post a Comment

Comment

Popular posts from this blog

AngularJS - Tables

Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily.  Following example states the use of ng-repeat directive to draw a table. <table> <tr> <th> Name </th> <th> Marks </th> </tr> <tr ng-repeat = "subject in student.subjects" > <td> {{ subject.name }} </td> <td> {{ subject.marks }} </td> </tr> </table> Table can be styled using CSS Styling. <style> table , th , td { border : 1px solid grey ; border - collapse : collapse ; padding : 5px ; } table tr : nth - child ( odd ) { background - color : #f2f2f2; } table tr : nth - child ( even ) { background - color : #ffffff; } </style> Example Following example will showcase all the above mentioned directive. <html> <head> <
Post a Comment
Read more

How to Password Protect a Directory on Your Website

Password protecting a directory on your site is actually fairly easy. Webmasters typically want to protect a directory if they have information that they want to make available only to a selected number of people. This guide teaches how you can make a folder on  your website  accessible only to people with the appropriate password. If Your Web Host Has a Control Panel Before you dive into the task of manually password-protecting a directory using Apache's built-in facilities, you might want to check out your web host's control panel to see if they already provide the facility for protecting directories. In my experience, many commercial web hosts already provide an easy way for you to password-protect your directories. If such facility is already available, it's probably best to use it since it will save you time, particularly if you are not familiar with shell command lines and editing of .htaccess files. Otherwise, read on. System Requirements You wi
2 comments
Read more

AMP Vs Responsive Web Design-Speed Vs Flexibility

WHAT IS RESPONSIVE WEB DESIGN? Responsive web design can be achieved using CSS3 media queries. Media queries allow web pages to use different CSS styles based on a user’s browser width. So according to mobile device width, one can easily write logical CSS media queries to make them compatible with different mobile devices. Regarding AMP Vs Responsive Web Design, Responsive Web Design focused on flexibility. Moreover, we can’t forget Google to get most of the business via a search engine. Now a day, Google is the topmost search engine. Google gives a lot of importance to page speed of website to improve the user experience. The majority of people are still using websites on mobile devices as opposed to mobile applications. Obviously, there is a specific audience who uses iOS apps and Android apps for eCommerce portals and others. Google introduce mobile-friendly feature when they show a result for any search term. So whenever your website list in Google searches result, you can se
Post a Comment
Read more