1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to get this table aligned in center in the box?

Discussion in 'CSS' started by Rashida H., Mar 17, 2019.

  1. #1
    Hi there!

    Website link: http://www.metalsfinder.com/aluminum/aluminum-angle/6061-t6-aluminum-angle/0-75-a-x-0-75-b-x-0-125-c-6061-t6-angle/?fbclid=IwAR2C8ObrQU9TpqwvRh4RLeTV_7BUge8sxKO-IxVGT0ceh_BnG11Mf1IxlTM

    I want to align this table in the centre of the box. kindly advise with the css customization to do the same.

    upload_2019-3-17_21-32-24.png

    Thanks!
    Rashida H.
    SEMrush
     
    Rashida H., Mar 17, 2019 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,926
    Likes Received:
    1,625
    Best Answers:
    232
    Trophy Points:
    515
    #2
    What table? That is not tabular data, so using <TABLE> and its associated tags is semantic gibberish.

    though that pretty much describes the code for that entire site. 1997 called, it wants its site building methodology back.

    If you don't know what's wrong with code like this:

    <div style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
    <table class="table table specifications__table chemistry__table" style="box-sizing: border-box; border-spacing: 0px; border-collapse: collapse; background-color: transparent; width: 495px; margin-bottom: 0px; margin-top: 16px; border: 1px solid #eff0f1; display: inline-grid; margin-left: 9px; float: left;">
    <thead style="box-sizing: border-box; background-color: #515964; color: #ffffff;">
    <tr style="box-sizing: border-box;">
    <td style="box-sizing: border-box; padding: 14px 20px; line-height: 1.42857; vertical-align: top; border-top: 0px; font-size: 16px;" colspan="2">Chemistry Information: 6061 Aluminum</td>
    </tr>
    </thead>
    <tbody style="box-sizing: border-box; display: inline-table; width: 493px;">
    <tr style="box-sizing: border-box;">
    <td style="box-sizing: border-box; padding: 14px 20px; line-height: 1.42857; vertical-align: top; border: none; width: 247px;">
    <h4 class="bold" style="box-sizing: border-box; font-family: inherit; line-height: 1.1; color: inherit; margin-top: 0px; margin-bottom: 0px; font-size: 16px;">Element</h4>
    </td>
    <td style="box-sizing: border-box; padding: 14px 20px; line-height: 1.42857; vertical-align: top; border: none; width: 246px;">
    <h4 class="bold" style="box-sizing: border-box; font-family: inherit; line-height: 1.1; color: inherit; margin-top: 0px; margin-bottom: 0px; font-size: 16px;">Percentage</h4>
    </td>
    </tr>
    
    Code (markup):
    You need to back away from writing websites until you learn what semantic HTML and separation of presentation from content is... or hire someone qualified to write HTML to fix that up for you. Here's a tip, 99.999% of the time you see style="" and 100% of the time you see <styie>, someone hasn't grasped how to use HTML correctly. Much less that section is tabular data, but the semantics is all wrong with the colspanned TD belonging in there as a caption, and the first two body TD belonging as TH inside the THEAD. Don't even get me started about the DIV for nothing.

    Any competent developer would have written this:
    
    <table class="chemistryTable">
    	<caption>Chemistry Information: 6061 Aluminum</caption>
    	<thead>
    		<tr>
    			<th scope="col">Element</th>
    			<th scope="col">Percentage</th>
    		</tr>
    	</thead>
    
    Code (markup):
    With every last other bit of what you're doing there belonging in the stylesheet.

    65k of HTML to deliver 2.3k of plaintext and two content images? That's easily six to eight times the HTML needed to do the job.

    Silly question, but just which WYSIWYG or site builder saddled you with this mess? I'm just asking as no human being would write HTML like this.
     
    deathshadow, Mar 18, 2019 IP