Как центрировать таблицу в HTML

А стол – отличный способ систематизированно представить большой объем информации. Данные о продажах, посещаемость веб-страниц, тенденции фондового рынка и оценки студентов являются примерами информации, которая часто представлена ​​в таблицах..

При добавлении таблицы на веб-страницу с помощью HTML, может быть более привлекательным визуально расположить его по центру страницы. Центрирование текста и изображений обычно выполняется с помощью выравнивание текста класс или через CSS, но центрирование стола требует другого подхода. Ниже приведены подробные сведения о том, как центрировать таблицу на веб-странице..

Центрирование таблицы в HTML

При добавлении таблицы на веб-страницу по умолчанию она выравнивается по левой стороне страницы или контейнера, как показано ниже..

ХИТЫ МЕСЯЦ ОБЩЕЕ УВЕЛИЧЕНИЕ
324 497 Январь 1998
436 699 Февраль 1998 г. 112 172

HTML исходный код для приведенной выше таблицы следующее.

<стиль таблицы ="граница: сплошной черный 1px"> <tr> <тд><б>ХИТЫ</ b></ тд> <тд><б>МЕСЯЦ</ b></ тд> <тд><б>ОБЩЕЕ УВЕЛИЧЕНИЕ</ b></ тд> </ tr> <tr> <тд>324 497</ тд> <тд>Январь 1998 </ тд> <td style ="выравнивание текста: центр">-</ тд> </ tr> <tr> <тд>436 699</ тд> <тд>Февраль 1998 г.</ тд> <td style ="выравнивание текста: центр">112 172</ тд> </ tr> </стол>

Чтобы центрировать эту таблицу, вам нужно добавить ; маржа слева: авто; маржа справа: авто; до конца стиль атрибут в <стол> тег. Тег таблицы будет выглядеть следующим образом.

<стиль таблицы ="граница: сплошной черный 1px; крайнее левое: авто; правое поле: авто;">

Изменение стиль атрибут в <стол> тег, как показано выше, приводит к центру таблицы на веб-странице, как показано ниже.

ХИТЫ МЕСЯЦ ОБЩЕЕ УВЕЛИЧЕНИЕ
324 497 Январь 1998
436 699 Февраль 1998 г. 112 172

Кончик

Вы можете добавить параметры в стиль атрибут в <стол> , чтобы сделать таблицу более привлекательной. Добавление отступ: 2 пикселя; и интервал границы: 20 пикселей; добавляет интервал между точками данных и границей, чтобы улучшить читаемость.

Вы пропустили

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Zed Наука о данных Разное Тренды

Современный подход к разработке с использованием Next.js