creating divisions between tables using css and html

Just starting out in web development and coding, I have a query about separating two tables. How can I do this? The relevant code is a few lines down.

<table border="1" width="35%" cellspacing="10" cellpadding="5">
    <tr>
    <th colspan="2"><h3>Dream Cars</h3></th>
    <td>Tesla</td>
    <td>Audi</td>
    <td>Lamborghini</td>
    </tr>

    <tr>
 <th colspan="2"><h3>Future Plans</h3></th>
    <td>Mobile App Development Job</td>
    <td>New York City</td>
    <td>Innovate technology</td>
    </tr>

</table>

Thank you!

htmlcss

Answer №1

To ensure a clean code, it is recommended to create two separate tables and handle all styling in a dedicated CSS file that can be linked to your HTML document.

<table border="1" width="35%" cellspacing="10" cellpadding="5" style="margin-bottom: 20px">
 <tr>
 <th colspan="2"><h3>Future Car's</h3></th>
 <td>Lincoln</td>
 <td>BMW</td>
 <td>Mercedes</td>
 </tr>
 <tr>
 <th colspan="2"><h3>Plan's for the future</h3></th>
 <td>Web Development Job</td>
 <td>San Francisco</td>
 <td>Create web sites</td>
 </tr>

</table>
<table border="1" width="35%" cellspacing="10" cellpadding="5">
 <tr>
 <th colspan="2"><h3>Future Car's</h3></th>
 <td>Lincoln</td>
 <td>BMW</td>
 <td>Mercedes</td>
 </tr>
 <tr>
 <th colspan="2"><h3>Plan's for the future</h3></th>
 <td>Web Development Job</td>
 <td>San Francisco</td>
 <td>Create web sites</td>
 </tr>

</table>

By following this structure, you will achieve a consistent 20px spacing between your tables which can be adjusted as needed.

Answer №2

If my understanding is correct, you are looking to divide the rows. One way to achieve this is by creating an empty column with a colspan of 3 and setting its height according to your preference; you can also use <br /> to fill it, or utilize &nbsp for a non-breaking space.

<table border="1" width="35%" cellspacing="10" cellpadding="5">
    <tr>
        <th colspan="2"><h3>Upcoming Cars</h3></th>
        <td>Toyota</td>
        <td>Honda</td>
        <td>Ford</td>
    </tr>
        <td colspan="3" height="30px">&nbsp</td>
    <tr>
        <th colspan="2"><h3>Career Goals</h3></th>
        <td>Software Engineering Role</td>
        <td>New York City</td>
        <td>Develop software applications</td>
    </tr>

</table>

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

Sending data from one Angular component to another on a button click

I have a background in Python, but I recently started delving into learning Angular and I'm encountering some difficulties. The concept of working between components is proving to be quite confusing for me, and I'm struggling to grasp it. Despite ...

javascripthtmlangular

How can Chinese characters be transformed into XML/HTML-style numerical entities and converted into Unicode UTF-8 encoding?

I have a situation where I need to change a text that contains both English words and Chinese characters into a format that includes XML/HTML-style numerical entities for the Chinese characters. Here's an example of the original text: Title: 目录. ...

pythonhtmlxmlregexcharacter-encoding

How jQuery Mobile Navbar behaves with 4 elements instead of 5

I am currently experimenting with jQuery Mobile and I have come across a discrepancy. The documentation states that the navbar should wrap on five elements, but in my testing, it is wrapping at only four elements. Is this the expected behavior? Here is th ...

jqueryhtmlcssjquery-mobile

Combining hover and mousedown event listeners in jQuery: Tips and tricks

htmlCODE: <div class="original_circle" style="border-radius: 50%; background-color: blue; width: 40px; height:40px; z-index: 0"> <div class="another_circle" style="position:absolute; border-radius: 50%; background-color: coral; width: 40px; h ...

javascriptjqueryhtmlcss

creating a user-friendly keyword/tag input interface

I'm currently developing a form and facing a challenge with a keyword/tag input field (similar to YouTube or Stack Overflow). I initially thought it made sense to use ',' to separate the tags, allowing users to use combinations of words usin ...

htmluser-interface

Exploring the concept of importing with chrome.tabs.insertCSS()

chrome.tabs.insertCSS(tabId, { code : '@import url("custom.css");' }); OR chrome.tabs.insertCSS(tabId, { file : 'importer.css' }); importer.css: @import url("custom.css"); a { color:red!important; } /* this rule applied successfully ...

cssgoogle-chrome-extension

Guide to creating animated sections using only CSS as you scroll the webpage

I am searching for a method to add animation effects (using @keyframes, transform...) to certain elements as the user scrolls down the page. For instance: When the offset is 0: the div will have a height of 100px. When the offset is between 0 and 100: th ...

htmlcss

Error: The JavaScript SRC cheat is malfunctioning

Having an issue with the code below. The 'dummy1' and 'dummy2' variables are not loading their content as expected on the page. Any suggestions? <html> <head> <title>JavaScript On-line Test</title> <script LA ...

javascripthtml

What is the best positioning option to choose: "Relative? Static, or something else?"

I decided not to use float for positioning my divs in CSS; instead, I used the position property with relative value. However, when viewing the site on different screen resolutions, all the divs end up getting jumbled. Can someone please explain what I m ...

htmlcsscss-position

Obtain and retrieve media URL (m3u8) with the help of PHP

I am currently working on a project that involves hosting videos for a client on a website. The videos are loaded externally through m3u8 links on the site. Now, the client has expressed interest in having these videos available on a Roku channel as well. ...

phphtmldomcurlroku

Accessing a PDF document from a local directory through an HTML interface for offline viewing

As I work on developing an offline interface, I'm encountering an issue with displaying a PDF file when clicking on an image. Unfortunately, the code I have in place isn't working as intended. Can someone please assist me with this problem? Below ...

javascripthtml

Is there a way to save HTML form data to a CSV file within a designated directory?

Does anyone know how to save a CSV file to a specific folder using JavaScript? I have an HTML form and I want to save the data as a CSV file in a particular directory. I've tried the code below but it's not working. <form onSubmit="WriteToFi ...

javascripthtml

Using CSS to filter the contents of an input field in Bootstrap 3

Is there a way to restrict the input field to only accept numbers? I attempted to use type='number', but non-numeric values can still be entered. How can I prevent users from inputting non-numbers? <input type="number" style="background-colo ...

htmlcssinputtwitter-bootstrap-3

I'm struggling to figure out why the CSS isn't working properly

i found this markup like shown here i am curious why it appears that lines 12 & 13 .notes:link span, .notes:visited span { ... seems to be functioning .comments span, background-position: -16px -16px; } .permalink:link span, .permalink:visited sp ...

css

The Google Map is unable to expand to fill the entire width of the column

I have exhausted all my efforts trying to troubleshoot this issue on my project's contact page. Currently, I have a layout with 3 rows containing columns within a Bootstrap 4 grid. The third row is supposed to display a Google Map within a column set ...

htmlcssbootstrap-4

Get user input from a textbox and use that input to conduct a search on Google

Hi there, I'm currently working on solving this particular problem. I'm attempting to create a HTML page using a form where the user can input a keyword and click on the "Search" button to search for that keyword on Google. I haven't had a ...

javascripthtml

What is the best way to integrate a Next.js Image component with a set width and an adaptable height in order to maintain the image's proportions?

This code snippet uses ChakraUI styling and retrieves images from SanityCMS: <Box w="500px" h="500px" bg="red"> <Image src={allArtPieces[0].imageUrl} alt={allArtPieces[0].title} width="500px" ...

javascriptcssreactjsnext.jssanity

Styling Borders in CSS/HTML

Having an issue with the CSS on my website, specifically when hovering over links in the navigation bar. I'm trying to add a border around the link when hovered over, but it's causing the other links to shift position. Here's what I have so ...

htmlcssborder

Rotating an HTML caret using CSS does not pivot from the center point

Is there a way to adjust my simple caret rotation to make it rotate from the center? What changes should I make? const Wrap = styled.div` width: 100px; background: grey; span { display: block; transform: ${(props) => (props.isOpen ? " ...

javascriptcssreactjs

problem encountered when converting SVG HTML into SVG paths

Recently, I came across an interesting SVG file depicting a question mark enclosed in a circle. Intrigued by its design, I wanted to extract the paths from this SVG image so that I could integrate it directly into my codebase. Following some online tutoria ...

htmlcsssvggimp