How do I center this code in the middle of the page?

HTML & CSS
123

First, I suggested changing outline to border solely to explain what you are seeing. You do not need to keep that change if you are otherwise happy using outline. The total width of the table using outline is 1200px. If you change outline to border permanently, then you should not change border-spacing to something other than zero. If you do, the total width of the table will become 1208px and there will be a visible space between the cells. Instead, you would want to change the left and right padding from 50px to 49px to compensate for adding the border to the width of the cell. Why would you want to do that?

124

with border
400 x 3 = 1200 + 8

125

400 representing the padding between each item. 8 representing the border lines.

126

No. Each item started at 400px wide and should remain 400px wide.
If you change the outline to a border, then:
(1) reduce the left and right padding in each cell from 50px to 49px.
(2) DO NOT change border-spacing from zero to one.
(3a) ADD this property to the tables {border-collapse:collapse} /* the table will become 1198px wide /
(or)
(3b) Add this property to the inner table {border:1px solid blue} / the table will become 1202px wide */

No, that statement is within comment marks. It is “commented out”. Thus, it is a private remark that does not influence the CSS.

127

When I add this code:
table {
border-spacing:0; /* current standard, preferred */
}

Is this part of the code also?

  • current standard, preferred */
128

ok. thanks.

129

I just had something right 2 seconds ago, then I messed it up and don’t remember what I did.

130

I have those moments more often than I care to admit.

Can I help?

131

I just got it. I remembered.

1 Like
132

I have a question though, should table be using block, or inline-block?

span.two{
color:#000000; 
display:inline-block; 
width: 300px; 
height: 24px;
background-color:#E2AB58;
}
133

Can you point me to a CSSdesk or CodePen of your table code? I need to see what is near the span to answer your question.

Never mind, I just remembered.

use {display:block}

In fact, the element shouldn’t be a <span> anyway, it should be a block element such as a <div> or possibly the <audio> element that Sam showed us.

134

Can you check all 3 for me.

This One: http://www.cssdesk.com/U7cHG
This One: http://www.cssdesk.com/WEL7w
This One: http://www.cssdesk.com/sGmhR

Are they all supposed to be {display:block}?

135

Off Topic

I agree, but you are largely causing this problem yourself by making multiple one-line posts in quick succession. If you think of something you should have said after you’ve posted, then please edit your post, rather than creating multiple posts. (Use the pencil icon in the lower right corner of your post.)

1 Like
136

ok, I will, thank you.

137

I looked at all 3. Same conclusion. The element shouldn’t be a <span>, it should be a block element such as a <div>.

138

what should it be if not a span?

139

What do you mean?

140

I mean that the orange bar element should be a <div>, not a <span> coded to be a block.

141

I should change

  <span class='two'>
                        </span>

to something else?

142

<div> is a generic Block container.
<span> is a generic In-line container.
Creating a span and styling it to display: block is pointless, as you should just use a div instead.