The position: absolute can’t work alone. Because the absolutely positioned element also needs to position itself compared to a certain (another) element. And this is where the position: relative comes into play. But if you do not specify the relative position, then it (absolutely position element) will consider its nearest container (ancestor) element as the relative. You can learn more about how the CSS position works in another post. In this post, I will show how you can perfectly center-align HTML elements using absolute position. After reading this post, you’ll be able to center align any elements both horizontally & […]
Read More →
The link or anchor tag is an inline-level element (not block-level). So it may not be always center aligned only by assigning text-align to the center. In this post, I will show you how to perfectly center a link or anchor tag both in horizontal & vertical directions. See the demo of the all examples in the link below. Let’s get started. Centering a link horizontally To demonstrate the purpose, I have the following HTML. To center align the above link (anchor tag), you can change its element level from inline to block and align it to center (as you […]
Read More →
To center a form, you need to specify the width property and specify the left & right margin to auto. In this post, I will show you how to center an HTML form. Also, I will show you how to center it both in vertical & horizontal directions. I have created some examples. You can check them in the link below. Let’s get started. How to center a form in the horizontal direction? To demonstrate the purpose, you need some sort of HTML. I have the following markup for the form. HTML You may have different markup but it’s totally […]
Read More →
In this post, I will show you how to make an HTML table vertically scrollable. You’ll also learn how to make the table header sticky when scrolling. End of this post, you’ll see how to make the table horizontally scrollable. Last but not least, those tables will be mobile-responsive. Before you get started, you can check the demo of the finished products in the link below. Let’s get started. How to make a table vertically scrollable? (Example 1) You can use any HTML markup for the table. However, in my HTML, I have a table header (<th>) and table body […]
Read More →
In this post, I will show you how to add background color to an HTML table. Also, I will give you a couple of examples including hover effects. Later in this post, you’ll also see how to add a background image to the same table. You can also check the example of the tables in the link below. Did you find what you were looking for in the demo? Let’s get started. How to add background color to an HTML table? Throughout this post, I will use the following HTML markup for the table. I have a header in this […]
Read More →
You can create an HTML table using the <table> tag. But only this tag can not create a meaningful table alone. In order to create a meaningful table, you also need table rows, columns & a header (optional). <tr>, <th> & <td> represent table row, header & data (respectively). There is no <tc> or table column tag. I will discuss more on this later in this post. In this post, I will not only give you the definition of these table tags but also make you understand how table tags are organized. Definition of the tags (tr, th & td) […]
Read More →
In this post, I will show you how to add images to HTML table cells. Also, you’ll see how to align them exactly the way you want. You can check the live demo of the example tables in the link below. Let’s get started. How to add/insert images to the table? Adding images to a table is very similar to inserting an image on any HTML document. Take an <img> tag inside the <td>. This is how you can insert images on HTML tables. Let me give you an example. HTML As you see in the above HTML, I have […]
Read More →
In this post, I will show you how you can align table elements in different directions. I will go through a couple of examples from the very basic to the extreme level I can imagine. I don’t anyone to waste their time looking into the wrong project. So I have created a demo. Check to see if this is what you were looking for. I will also provide you with educational materials such as infographics (even though I am not very good at artwork & drawing), graphics, code (including GitHub Repo), etc. Let’s start. Aligning table elements Throughout this post, […]
Read More →
In this post, I will show you multiple ways to make an HTML table center aligned using CSS. Also, I will provide additional information regarding the table later in this post. Let’s make it center align. Multiple ways to make a table center I have a basic HTML markup as follows: First method You can make the above table using just one line of CSS. CSS <table> is a block-level element. So you can make it center align just by adding an auto margin to the left & right sides. Second method In this method, I will use CSS Flexbox […]
Read More →
This post will show you how to create a full-screen slider using HTML, CSS & JavaScript. Also, I will include header navigation that stays on top of the slider. It’s fully mobile responsive and works well on all web browsers. No dependencies, frameworks, or libraries are required. Before you start, you can see the finished project in the link below. If you liked the live demo, let’s get started. How to create a full-screen slider (Source code) No matter the screen size, the slider will always be full-screen. This kind of slider is generally used in the home page section. […]
Read More →