additional column in an HTML table

I have been attempting to print the start and end under execution. However, I am encountering an issue where there is an extra cell beside End. Here is the code snippet I am currently using:

<table style="float: center;border:2px;font-size:20px;color:white;border-collapse: collapse;border-spacing: 3;width: 25%;"> <tr><td> PC </td> <td> INSTRUCTION </td> <td> ISSUED </td> <td colspan="2"><table style="font-size:20px;color:white;border-collapse: collapse;border-spacing: 3;width: 25%;"><tr><td>EXECUTION</td></tr></table><table style="font-size:20px;color:white;border-collapse: collapse;width: 25%;"><tr><td>START</td><td>END</td></tr></table> <td> WRITTEN </td></tr>

Any suggestions on how to eliminate this additional cell? https://i.sstatic.net/DpJIy.png

javascripthtmlcss

Answer №1

Your "additional cell" refers to the gap between the end of a cell containing the text "END" and its parent cell that houses embedded tables. Instead of nesting tables within each other, it is recommended to utilize rowspan and colspan.

body {
    background-color: black;
}
table,
tr,
td {
    border-color: white;
    border-style: solid;
    border-width: 2px;
}
table {
    border-collapse: collapse;
    border-spacing: 3;
    color: white;
    float: center;
    font-size: 20px;
    text-transform: uppercase;
    width: 25%;
}
<table>
    <tr>
        <td rowspan="2">PC</td>
        <td rowspan="2">Instructions</td>
        <td rowspan="2">Isused</td>
        <td colspan="2">Execution</td>
        <td rowspan="2">Written</td>
    </tr>
    <tr>
        <td>Start</td>
        <td>End</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

Customize the appearance of a React component depending on its unique identifier

After creating a simple TODO app with drag and drop functionality, I am now looking to apply a line-through CSS style to any task added or dragged into the second column of my app. What is the best way to target these tasks using their unique ID: <div c ...

javascriptcssreactjsreact-dnd

What is the difference between getAttribute() and Element object properties?

When working with HTMLElement objects, both Element.getAttribute("id") and Element.id will return the same value. Which method is preferred for accessing attributes of an HTMLElement object? Are there any cross-browser compatibility issues with methods l ...

javascripthtmldom

Determine the number of elements chosen within a complex JSON structure

I need to figure out how to count the length of a jsonArray, but I'm stuck. Here's an example to start with: https://jsfiddle.net/vuqcopm7/13/ In summary, if you click on an item in the list, such as "asd1", it will create an input text every t ...

javascripthtmljsonangularjs

Mentioning Nodejs' process.argv unexpectedly triggers errors when reading a file

I am currently working on a code that is responsible for generating a very large JSON object, saving it to a file, and then loading the file to insert the data into a Mongo collection. My goal is to pass a string from the command line when executing the sc ...

javascriptnode.jsjsonmongodbarguments

Wagtail one-page website

Recently, I created a one-page site in static HTML featuring shiny divs that span the height of the screen, along with a smooth scrolling function in the navigation bar. The site was designed to include a mix of plain text, images, and a card-deck. Everyth ...

pythonhtmldjangowagtail

The segmented button's dropdown menu in Bootstrap is malfunctioning on Firefox version 27.0.1

I'm attempting to create a basic search bar using Bootstrap's segmented button feature (check out an example at http://getbootstrap.com/components/#input-groups-buttons-segmented). This is the code I have so far, and it's accessible on jsfi ...

jqueryhtmlcsstwitter-bootstrap

How can I incorporate an external page into Joomla without using an iframe and apply my own CSS styles?

Is there a way to load external page content into a module position without using an iframe? I want to apply my own template's CSS definitions to the remotely loaded content, but Joomla's wrapper module isn't allowing this due to the same do ...

cssajaxjoomlajoomla2.5

Tips for implementing multi-language URL routing in a Node.js application

I am seeking guidance on how to handle routing for multi-language URLs in Node.js, Currently, I have the following routes set up where each language generates specific routes as shown below. However, with more than 5 languages, efficiency is becoming a co ...

javascriptnode.jsexpressroutesmiddleware

Utilize the bind-attribute "for" in Ember.js

I'm having trouble setting a unique ID for an tag in order to create a custom checkbox. The {{input}} tag works fine, but the <label {{bind-attr for=binding}}> is not displaying as expected. I am new to Ember as a frontend developer, so I belie ...

javascriptember.jsdata-bindinghandlebars.js

How to showcase the date in a unique format using Angular

Does anyone know of a JavaScript ES7 method that can convert the output of new Date() into the format shown below? If there isn't a built-in method, I am willing to manually parse or find/replace it myself. 2020-06-30 07.49.28 I would like the da ...

javascriptangulartypescriptmomentjsangular8

What is the reason that columns do not float in Bootstrap when there are no rows?

I have been doing some research into Bootstrap and have come across the following resources: What is the purpose of .row in Bootstrap? and Despite reading these links, I am still struggling to understand why my columns do not float left as expected in th ...

cssbootstrap-4css-float

Tips for presenting PHP code in a Bootstrap 3 col-sm-4 layout for each set of 3 database entries in a single row

My PHP program retrieves 3 customer records from the database. I want to display the results in a Bootstrap grid view with 3 columns of col-sm-4 in one row. Currently, it displays all the results in a single vertical line. Another requirement is to show ...

phphtml

Conceal the button once the page has been converted to an HTML format

Located at the bottom of the HTML page is a button that triggers an onClick function. Since the page only contains internal CSS, when users save the page (by right-clicking and selecting Save As) as an HTML file, it is saved without any additional folders ...

javascripthtmlcss

Integrate my API with HTML using J.Query/Ajax technology

Finally, after much effort, I have successfully created a JSON java API. My API design is simple and based on Interstellar movie details: { "title": "Interstellar", "release": "2014-11-05", "vote": 8, "overview": "Interstellar chronicl ...

javascriptjqueryhtmljsonajax

Javascript function does not return a value

Having trouble retrieving a string value from this function: function loadPage(url) { var xhttp = new XMLHttpRequest(); xhttp.open("GET", url, true); xhttp.send(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 ...

javascriptajaxxmlhttprequest

What is the most effective method for implementing a "Like" feature without any redundant code?

Currently, I am in the process of creating a "Like" function similar to those found on platforms like Facebook or Instagram. However, I am unsure of the most effective approach to take. I have contemplated two main methods, both of which involve ensuring ...

javascriptnode.jsarraysdatabasemongodb

The website covers the entire page, but I prefer it not to

During the development of my website, I encountered a challenge: How to confine it within a wrapper or container set at 1000px rather than occupying the entire webpage. Below is the HTML code: <!DOCTYPE html> <div class="wrap"> <html> & ...

htmlcsscontainerswrapperresponsive

Using Bricklayer.js multiple times on one page: a guide

UPDATE I have incorporated @Alice's solution into this code snippet to demonstrate the purpose of using bricklayer. While working with bricklayer, I noticed that it only affects the first bricklayer and ignores the second one. This behavior is expecte ...

javascripthtmllayoutgrid

Refresh data on Table with AJAX and a repeated process

I am relatively new to Javascript and Ajax, so please bear with me as I explore... My goal is to update a table after inserting a new row. Instead of generating an entire HTML table through Ajax output, I would prefer to gather data from a PHP MySQL datab ...

javascriptphpajaxhtml-table

Only initiate an AJAX call if there are no other pending AJAX requests from prior function invocations

Arriving at a new, chaotic code base with no testing available has presented me with a significant challenge. I am currently struggling to resolve an issue without the use of ES6, only relying on plain vanilla JS and jQuery. The scenario: Within a web pag ...

javascriptjqueryajax