Utilize CSS to create spacing between columns in a webpage

I have incorporated a table into my project and here is the HTML snippet for reference:

th {
  text-align: left;
}

td {
  height: 20px;
  font-size: 12px;
  background-color: #000;
  color: #fff;
  margin-right: 20px;
  border-top-left-radius: 10px;
}
<table>
  <tr>
    <td>Exams</td>
    <td>Science</td>
    <td>Mathematics</td>
    <td>Biology</td>
  </tr>
  <tr>
     <td>2000</td>
     <td>95</td>
     <td>64</td>
     <td>33</td>
  </tr>
</table>

I am looking to increase the spacing between the column elements in the table. Although I have applied margin-right, it seems to not be affecting the output. Can someone provide guidance on how to achieve this?

htmlcsshtml-table

Answer №1

To add space between the rows and columns of a table, you can utilize the border-spacing property in CSS for the table element. Additionally, applying padding to the cells helps create extra space inside each cell, including the background.

Note: It's important to note that th elements are considered special ("header") cells within a row (tr). The code has been modified accordingly.

table {
  border-spacing: 10px 5px;
}

th {
  text-align: left;
}

td,
th {
  padding: 0 5px;
  height: 20px;
  font-size: 12px;
  background-color: #000;
  color: #fff;
  border-top-left-radius: 10px;
}
<table>
  <tr>
    <th>Exams</th>
    <th>Science</th>
    <th>Mathematics</th>
    <th>Biology</th>
  </tr>
  <tr>
    <td>2000</td>
    <td>95</td>
    <td>64</td>
    <td>33</td>
  </tr>
</table>

Answer №2

To create space between elements, consider utilizing the CSS property border-spacing. However, if you are referring to adding space within an element, you may want to look into using padding instead.

Answer №3

Another option is to utilize padding in order to achieve the desired effect:

padding-right: 20px

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 2 - Utilizing multiple templates

Recently, I've been working on an application that requires the ability to load different templates dynamically. The standard template structure I'm using is as follows: <!doctype html> <html lang="en"> <head> <meta cha ...

javascripthtmlangular

Nodemon causing crashes in basic HTML pages

Having trouble getting a basic index.html page to work with nodemon. index.html <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </hea ...

javascripthtmlnodemon

Update the link's name and href using jQuery

i have a link with this href <div id="site_change"> <a id="mysite" href="https://halloweentorino.com/">halloween torino</a> </div> but I want to change the href and the name of the link within it <div id="site_change"> ...

jqueryhtml

Angular: Disabling a button based on an empty datepicker selection

Can anyone help me figure out how to disable a button when the datepicker value is empty? I've tried using ngIf to check if the datepicker is empty and then disable the button, but it's not working. My goal is to make the button unclickable if th ...

javascripthtmlangulartypescript

Ways to examine the origin of an image based on the attributes of a React component that I have passed as a prop?

I'm facing an issue where I can't use the component's prop to set the src of an image that I imported from a file path in my component's JavaScript file. I have tried different syntaxes but none seem to be working. Here are the formats ...

javascripthtmlreactjsjsxcreate-react-app

Showing a cropped section of an image inside a div container

Is it possible to display a specific portion of an image within a div that is 300*300px in size while maintaining responsiveness, using only HTML and CSS? The div always occupies 33% of the page width. Here is an example of my code: HTML <div class= ...

htmlcssimage

What methods can I implement to prevent my boxes from becoming stretched out?

How can I prevent this box from stretching too much? Here is the code snippet along with the output: CSS: .social { padding-left: 1000px; border: 5px inset black; margin: 4px; width: 100px; } HTML: <div class="social"> <p& ...

htmlcssweb

Eliminate the horizontal overflow caused by the HTML video tag

I'm currently facing an issue with using a video as the background for a div on my website. The problem arises when I view it on a smaller resolution, causing overflow on the right side. I've been attempting to solve this without success... You ...

htmlcssvideo

Engage the PROTRACTOR refresh function

I'm just getting started with automation and Protractor. I successfully automated the login page, but now I'm facing a challenge with accessing a menu that I need in order to navigate to a different page. Within the menu, there is an href="#/dom ...

javascriptcssangularjsprotractor

Hover to reveal stunning visuals

Can anyone help me figure out how to change the color of an image when hovered over using HTML or CSS? I have a set of social network icons that I want to incorporate into my website, and I'd like the icon colors to change when the mouse moves over th ...

htmlcsshovermousehover

Finding the identifier of a dynamically generated text input using PHP

I am looking to create a page similar to this On this page, users can add multiple entries for date, site, start time, end time, and hours amount by clicking the + button, and remove entries using the - button. How can I retrieve the input values in PHP? ...

javascriptphpjqueryhtml

Troubleshooting overlap problem between Skrollr and SlickNav

I successfully implemented Skrollr to fix images, similar to this example: Additionally, I am utilizing Slicknav for the menu functionality. However, I encountered an issue where the menu opens behind the fixed "parallax" image. Despite trying various ap ...

javascripthtmlcssskrollrslicknav

Attempting to align the text on a single line

Hey there, I have a quick question about my website. I followed some advice and everything is working great, but now I have an issue with a space between the tables. I wanted to attach a file, but it seems I don't have enough reputation yet. If you ...

html

What is the best way to address the problem of quotes while utilizing Freemarker in conjunction with ckEditor (or any other html editor

Consider this scenario within my template: ${(object.attribute)!"default text"} At times, quotation marks are necessary, such as when FreeMarker is handling null dates and similar instances. The issue arises when my HTML editor automatically transforms ...

javahtmltemplatesckeditorfreemarker

How can we use jQuery to extract an HTML element's external stylesheet and add it to its "style" attribute?

My goal is to extract all CSS references from an external stylesheet, such as <link rel="stylesheet" href="css/General.css">, and add them to the existing styling of each HTML element on my page (converting all CSS to inline). The reason for this re ...

javascriptjqueryhtmlcss

Upgrading the grayscale filter to 100% in Internet Explorer 11

Recently, I learned that the support for the grayscale(100%) filter was eliminated in Internet Explorer 9 and later versions. Can you suggest an alternative filter that I can use for .svg format images instead? ...

csssvg-filters

What is the best way to incorporate an exception for the printThis() element?

Is there a way to exclude a specific div from being printed when using the printThis() function? For example: <div id="print-it"> <div>hello</div> <div id="no-print-this"> <button>must be show on page but not print</but ...

javascriptjqueryhtmlpluginsprintthis

Should I implement this practice when developing an AJAX website? Is it recommended to enable PHP code within .html files, or should I switch to using .php files instead?

Query: I am interested in executing PHP within HTML documents to include HTML using PHP include();. Question: Would it be more beneficial to change .php to .txt for my AJAX-loaded pages and switch my .html files to .php? This approach might resolve the ...

javascriptphphtmlajax

Is it possible to encounter the issue of "Context Lost" and "Importing multiple instances" in Three.js?

I am in the process of developing a 3D editor that allows users to manipulate a 3D scene and then view the result by pressing a "play" button. In order to display the output, I am utilizing an iframe. Below is the snippet of my HTML code: <iframe id=&qu ...

javascripthtmliframethree.js

Combining the elements p and div on a single line

I've designed a card layout with 3 rows containing a paragraph and a div element each. I want both elements in each row to be displayed on the same line. How can I achieve this? Sample HTML: <div class="user_card"> <div class="skills"&g ...

htmlcss