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

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.



Thanks!
Rashida H.

 

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.